css - react JS : How to animate conditionally rendered components?

Question

示例 是一个功能组件，我在其中渲染 div有条件的。我想要这个 div至 淡入当有条件地呈现和 淡出反之亦然。

为此，我维护了两个本地状态变量:render和 fadeIn这是基于 show 计算的 Prop 传递给示例 成分。

我所做的是:

当show支撑它真 , 我设置 render如 真 ，所以 div在 10ms 超时后有条件地呈现我设置了fadeIn如 真这会将我的 div 的 CSS 类名设置为 show .

当show支撑它假 , 我设置 fadeIn如 假 ，这会将我的 div 的 CSS 类名设置为 hide在 200ms 超时后(CSS 中的过渡时间)我设置了 render如 假 所以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;
}

我相信这是 不是一个好的编码习惯 来实现功能，并且应该在我的组件中只维护一个本地状态。我需要你的 建议 关于我如何在 中解决这个问题更好的方法 不使用任何第三方库 .
谢谢 :)

Answer 1

const [render, setRender] = useState(false);

useEffect(() => {
   if(show) {
     setTimeout(() => {
       setRender(true);
     }, 2000);
   } else {
     setRender(false);
   }
}, [show]);

<div className={cs(s.render, render ? 'show' : undefined)}>
  <p>{content}</p>
</div>

css:

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

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

希望有所帮助。