如何使用 react-transition-group CSSTransition 在页面加载时设置动画？答案

【问题标题】：How to use react-transition-group CSSTransition to animate on page load?如何使用 react-transition-group CSSTransition 在页面加载时设置动画？
【发布时间】：2020-05-13 17:28:27
【问题描述】：

我有一个沙箱，其中包含两个渲染动画 div 的组件。一个有一个按钮，它使用 in 道具来渲染动画 div，这可以正常工作。另一个组件旨在在页面加载时动画一次。但是没有动画，它只是渲染 div。如何使用 CSSTransition 在页面加载时设置动画？

https://codesandbox.io/s/csstransition-component-page-load-vs-button-k41xu?file=/index.js

任何帮助表示赞赏。

谢谢

【问题讨论】：

标签： reactjs react-transition-group

【解决方案1】：

我通过向 auto 组件添加额外的状态以在 css 转换上设置 in 属性来修复它。显然它需要切换到工作。

  let [show, setShow] = useState(false);
  useEffect(() => {
    setTimeout(()=>setShow(true), 1000);
  }, [])

  then

  <CSSTransition in={show}...

【讨论】：