react 动画

  1. 使用插件 react-transition-group

  先下载插件react-transition-group : 命令行输入 npm  i  react-transition-group@1.2.1

  下载1.2.1版本

   2.引入 react-transition-group  , 在 App.js里面加入

import { CSSTransitionGroup }  from 'react-transition-group

   3.哪个东西要用动画,就把哪个元素用<CSSTransitionGroup>   </CSSTransitionGroup> 标签包起来~

   4.然后得给标签加一个类名 transitonName="XX"

    <CSSTransitionGroup transitionName="XX" transitionEnterTimeout={number}  transitionLeaveTimeout ={number}  transitionAppear ={true}  transitionAppearTimeout={xx} >  

     </CSSTransitionGroup>

    transitionEnterTimeout ={ } number是毫秒数,限定动画入场时间,如果超过了你给的参数,那么将直接变成 XX-enter-active的样式

 transitionLeaveTimeout ={ } number是毫秒数,限定动画离场时间,如果超过了你给的参数,那么将直接变成 XX-leave-active的样式

    5.类名有四种 :

      .xx-enter {}  进入之前的样式

     .xx-enter-active {} 进入之后的样式

     .xx-leave {} 离开时的样式

     .xx-leave-active {} 离开之后的样式

    6. 出场动画 transitionAppear ={true}

        .XX-appear {

           }



        


阅读更多
换一批

没有更多推荐了,返回首页