React中的过渡动画

1, 在react工程中下载安装过渡动画模块
    npm install react-transition-group --save
2, 在需要执行过渡的组件中导入动画模块
    import { CSSTransition } from "react-transition-group"
3, 在需要过渡的标签外层添加CSSTranstion组件

    /* in属性绑定bool值,控制子标签创建销毁, 
    timeout属性绑定时间,允许过度执行的时间,和过渡时间一致
    classNames 设置入场/出场动画的class前缀 */
<CSSTransition in={bool} timeout={2000}  classNames="myfade">
    <div></div>
</CSSTransition>

4, 在组建的css中通过class设置入场和出场动画
    .myfade-enter   .myfade-enter-active    .myfade-enter-done
    .myfade-exit      .myfade-exit-active    .myfade-exit-done

注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒
      2, 需要在index.js中关闭严格模式, 删除   <React.StrictMode>
      3, enter-active和exit-active中要写过渡结束状态才有效