使用react-transition-group实现动画

Posted 2020-12-14 nothingness

安裝：cnpm i react-transition-group

详细介绍： 

https://reactcommunity.org/react-transition-group/css-transition 

/* 显示 */
/* fade-appear第一次显示执行的样式 */
.fade-enter，fade-appear{
opacity: 0;
}
.fade-enter-active，fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in ;
}
.fade-enter-done，fade-appear-done{   /* 动画执行完成后保留的样式 */
    opacity: 1;
}

/* 隐藏 */
.fade-exit{
    opacity: 1;
}
.fade-exit-active{
    opacity: 0;
transition: opacity 1s ease-in ;
}
.fade-exit-done{
    opacity: 0;
}


还需要引入定义的样式效果
需要的文件中引入：import { CSSTransition } from ‘react-transition-group‘;

 <CSSTransition 

            in={this.state.show}

            timeout={1000}

            unmountOnExit//执行完成后dom销毁

            classNames=‘fade‘

            appear={true}//开启第一次执行展示的样式

            // onEntered动画执行完成后执行的钩子函数

            onEntered={(er)=>{er.style.color=‘red‘}}

            >

             <div>动画效果</div>

             </CSSTransition>

             <button onClick={this.ishide}>控制</button>

 transition-group：https://reactcommunity.org/react-transition-group/transition-group

给多个div添加样式  

  引入TransitionGroup组件

  import { CSSTransition, TransitionGroup } from ‘react-transition-group‘;

外层使用TransitionGroup，里面使用CSSTransition，那么CSSTransition 上面的 in={this.state.show}就不需要添加

 

         <TransitionGroup>

             {

                 this.state.list.map((itme,index) => {

                     return (

                        <CSSTransition 

                            timeout={1000}

                            unmountOnExit//执行完成后dom销毁

                            classNames=‘fade‘

                            appear={true}//开启第一次执行展示的样式

                            // onEntered动画执行完成后执行的钩子函数

                            onEntered={(er)=>{er.style.color=‘red‘}}

                            key={index}

                            >

                         <div>{itme}</div>

                         </CSSTransition>

                     )

                    })

             }

             </TransitionGroup>

  <button onClick={this.aaditem}>添加</button>

 

   aaditem(){

        this.setState((propsstate)=>{

            return{

                list:[...propsstate.list,‘item‘]

            }

        })

    }