美文网首页
react使用animate.css完成动画

react使用animate.css完成动画

作者: 糖醋鱼_ | 来源:发表于2020-06-22 12:01 被阅读0次

1.引入依赖库

cnpm i animate.css

cnpm i react-addons-css-transition-group

2.导入模块

import"animate.css";

importReactCSSTransitionGroupfrom"react-addons-css-transition-group";

3、使用,例子如下

<ReactCSSTransitionGroup

        transitionEnter={true}

        transitionLeave={true}

        transitionEnterTimeout={2500}

        transitionLeaveTimeout={1500}

        transitionName="animated">

//这里一定要加上key  

//className是animate.css中的类名,显示不同动画

       <divkey="amache"className="animated fadeInLeftBig">                                       <imgsrc="/assets/img/history/157.png"alt=""/></div>

</ReactCSSTransitionGroup>

相关文章

网友评论

      本文标题:react使用animate.css完成动画

      本文链接:https://www.haomeiwen.com/subject/rfqiwhtx.html