使用react

/* 显示 */
/* 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>

给多个div添加样式  

  引入TransitionGroup组件

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

语言	方法
7749	3gQ7D
b7GQ2	抖音是哪个公司的老板是谁「详解」
8794	2009/05/09 01:56:27

外层使用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']

            }

        })

    }