如何在 React useState 元素上使用 CSS 过渡？

Question

我有一个网站，我想在其中的不同 HTML 部分之间进行更改，在单击按钮时发生的这些更改期间，我希望该部分淡入。

我在这里做了一个小测试运行，这是 html:

   const [isTestWorking, setIsTestWorking] = useState("test-1");
   
   {isTestWorking == "test-1" && (
            <section 
              className={`test1 ${isTestWorking == "test-1" ? "show" : ""}`}
            >
              <h1>Testing 1</h1>
              <button
                onClick={() => {
                  setIsTestWorking("test-2");
                }}
              >
                Transition
              </button>
            </section>
   )}

   {isTestWorking == "test-2" && (
            <section 
              className={`test2 ${isTestWorking == "test-2" ? "show" : ""}`}
            >
              <h1>Testing 2</h1>
              <button
                onClick={() => {
                  setIsTestWorking("test-1");
                }}
              >
                Transition
              </button>
            </section>
   )}
   

这是 CSS：

   .test1 {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
   }

   .test1.show {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
   }

   .test2 {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
   }

   .test2.show {
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
   }

我预计这会很好地工作，但我认为该元素会在动画已经在后台播放后加载到网站上。 我不知道该怎么办，所以如果您能帮助我，我将非常感激。

Answer 1

您可以在更改状态时引入轻微的延迟，以确保在呈现新部分后可以看到转换。

import React, { useState, useEffect } from "react";

const YourComponent = () => {
  const [isTestWorking, setIsTestWorking] = useState("test-1");

  useEffect(() => {
    const timeout = setTimeout(() => {
      // Delay the state change after a short time to ensure the section is rendered before transitioning
      clearTimeout(timeout);
      setIsTestWorking(isTestWorking === "test-1" ? "test-2" : "test-1");
    }, 100); // Adjust the delay time as needed
  }, [isTestWorking]);

  return (
    <>
      {isTestWorking === "test-1" && (
        <section className={`test1 ${isTestWorking === "test-1" ? "show" : ""}`}>
          <h1>Testing 1</h1>
          <button
            onClick={() => {
              setIsTestWorking("test-2");
            }}
          >
            Transition
          </button>
        </section>
      )}

      {isTestWorking === "test-2" && (
        <section className={`test2 ${isTestWorking === "test-2" ? "show" : ""}`}>
          <h1>Testing 2</h1>
          <button
            onClick={() => {
              setIsTestWorking("test-1");
            }}
          >
            Transition
          </button>
        </section>
      )}
    </>
  );
};

export default YourComponent;