7.react过渡效果

最新推荐文章于 2025-12-02 16:49:34 发布

原创最新推荐文章于 2025-12-02 16:49:34 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

文章介绍了如何在React项目中安装并使用react-transition-group库来创建过渡动画。首先通过npm安装模块，然后在组件中导入CSSTransition。接着，在需要动画效果的元素外层包裹CSSTransition组件，并配置相应的属性如in、timeout和classNames。最后，在CSS中定义入场和出场的class样式以实现动画效果。需要注意的是，入场和出场的class顺序以及在index.js中可能需要关闭严格模式。

1, 在react工程中下载安装过渡动画模块
   cnpm install react-transition-group --save
2, 在需要执行过渡的组件中导入动画模块
   import { CSSTransition } from "react-transition-group"
3, 在需要过渡的标签外层添加CSSTranstion组件
   <CSSTransition in={bool} timeout={2000} classNames="luozhixiang">
<div></div>
</CSSTransition>
4, 在组建的css中通过class设置入场和出场动画
   .luozhixiang-enter .luozhixiang-enter-active .luozhixiang-enter-done
   .luozhixiang-exit .luozhixiang-exit-active .luozhixiang-exit-done

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