react使用animate.css完成动画

2020-06-22  本文已影响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>

上一篇下一篇

猜你喜欢

热点阅读