示例是一個功能組件，我在其中有條件地呈現(xiàn)一個div。我希望這個div在有條件渲染時淡入，反之亦然。

為此，我維護(hù)了兩個本地狀態(tài)變量:render和fadeIn，它們是基于傳遞給示例組件的show prop計算的。

我所做的是:

當(dāng)show prop it true時，我將render設(shè)置為true，因此div有條件地呈現(xiàn)，在10毫秒的超時后，我將fadeIn設(shè)置為true，這將為我的div設(shè)置CSS classname作為show。 當(dāng)show prop it false時，我將fadeIn設(shè)置為false，這將把我的div的CSS classname設(shè)置為hide，在超時200 ms(CSS中的過渡時間)后，我將render設(shè)置為false，以便有條件地隱藏div。 代碼:

interface Props {
  show: boolean;
}

const Example: React.FC<Props> = ({ show, }) => {
  const [render, setRender] = useState(false);
  const [fadeIn, setFadeIn] = useState(false);

  useEffect(() => {
    if (show) {
      // render component conditionally
      setRender(show);

      // change state to for conditional CSS classname which will
      // animate opacity, I had to give a timeout of 10ms else the
      // component shows up abruptly
      setTimeout(() => {
        setFadeIn(show);
      }, 10);
    } else {
      // change state to change component classname for opacity animation
      setFadeIn(false);

      // hide component conditionally after 200 ms
      // because that's the transition time in CSS
      setTimeout(() => {
        setRender(false);
      }, 200);
    }
  }, [
    show,
  ]);

  return (
    <div>
      {render && (
        <div className={`container ${fadeIn ? 'show' : 'hide'}`} />
      )}
    </div>
  );
};

樣式表:

.container {
  width: 100px;
  height: 100px;
  background-color: black;
  transition: opacity 0.2s ease;
}

.show {
  opacity: 1;
}

.hide {
  opacity: 0;
}

我認(rèn)為這不是實現(xiàn)該功能的好的編碼實踐，應(yīng)該在我的組件中只維護(hù)一個本地狀態(tài)。我需要你的建議，告訴我如何在不使用任何第三方庫的情況下更好地解決這個問題。 謝謝:)

Css:

.render {
  ...,
  visibility: hidden;
  opacity: 0;
  transition: all 0.6s ease;
}

.show {
  visibility: visible;
  opacity: 1;
}

希望有幫助。

實際上，這種情況有一個HTML屬性，叫做onAnimationEnd或onAnimationStart。

示例:

export default function App() {
  const [isMounted, setIsMounted] = useState(false);
  const [showDiv, setShowDiv] = useState(false);
  return (
    <div className="App">
      <button onClick={() => {
        setIsMounted(!isMounted)
        if (!showDiv) setShowDiv(true); //We should Render our Div
      }
      }>Show/Hide</button>

      { //Conditional Rendering
        showDiv && <div
        className="transitionDiv"
        style={isMounted ? mountedStyle : unmountedStyle}
        onAnimationEnd={() => { if (!isMounted) setShowDiv(false) }}
      ></div>}
    </div>
  );
}

更多信息可以在這篇文章中找到