react使用animate.css完成动画

最新推荐文章于 2024-05-29 09:35:06 发布

转载最新推荐文章于 2024-05-29 09:35:06 发布 · 2.6k 阅读

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在React项目中使用animate.css实现过渡动画效果。通过安装依赖库并导入所需模块，结合ReactCSSTransitionGroup组件设置动画参数，实现元素进入与离开页面时的不同动画展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入依赖库
cnpm i animate.css
cnpm i react-addons-css-transition-group
2.导入模块
import “animate.css”;
import ReactCSSTransitionGroup from “react-addons-css-transition-group”;

3.使用，例子如下
<ReactCSSTransitionGroup
transitionEnter={true}
transitionLeave={true}
transitionEnterTimeout={2500}
transitionLeaveTimeout={1500}
transitionName=“animated”

            //这里一定要加上key
            //className是animate.css中的类名，显示不同动画
          <div key="amache" className="animated fadeInLeftBig" >
               <img src="/assets/img/history/157.png" alt="" />
          </div>

作者：bennnnn
链接：https://www.jianshu.com/p/11af4687d515
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。