react 过渡动画组件

在项目中可能会有一些动画效果展示或是页面切换效果，css动画的方式，比较局限，涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块，借住这个模块可以更方便的实现更加复杂的动画效果

• 安装

npm i -S react-transition-group

• 使用

state = {

    show: true

}

 

//执行动画

  handleToggole = () => {

    this.setState({

      show: !this.state.show,

 

    })

}

 

render(){

return (

<CSSTransition

          in={this.state.show}   //控制动画是否入场，为true时，动画进场，为false时动画出场

          timeout={1000}         //动画执行时间

          classNames={{

            enter: 'animated',

            enterActive: 'slideInLeft',

            exit: 'animated',

            exitActive: 'slideOutLeft'

          }}      //自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）

             unmountOnExit  //可选属性，当动画出场后，在

             >

             <div>玩转React Transition</div>

</CSSTransition>

<button type="primary" onClick={this.handleToggole}>Animation</button>

 

 

)

}

在组件是引入动画库

 

css动画

• nimate.css动画库集成到react-transation-group动画模块中

网址：https://animate.style/

通过cdn地址下载动画库

 

放到项目中的src/assets目录中

集成到CssTransation组件中