美文网首页
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