美文网首页我爱编程
react使用animate.css完成动画

react使用animate.css完成动画

作者: bennnnn | 来源:发表于2018-04-17 10:42 被阅读1068次

    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>
     </ReactCSSTransitionGroup>
    

    相关文章

      网友评论

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

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