react-transition-group

CSSTransition
https://blog.csdn.net/mo_jiu/article/details/86302444
csstransition优越之处在于提供了额外的钩子函数更好的实现过渡效果。

<CSSTransition
                    in={this.state.show}//判断过渡的分割点
                    timeout={1000}//所需要的时间
                    classNames='fade'//所采用的效果，以fade开头的css类属性
                    unmountOnExit//离开时删除DOM
                    onEnter={(el)=>{
                        el.style.color='blue'//入场动画结束时触发
                    }}
                    appear={true}//第一次出现时也执行动画
                >
                    <div>hello</div>
 </CSSTransition>

.fade-enter,.fade-appear{
    opacity: 0;
  }
  .fade-enter-active,.fade-appear-active{
    opacity: 1;
    transition: opacity 1s ease-in;
  }
  .fade-enter-done{
    opacity: 1;
  }
.fade-exit{
    opacity: 1;
} 
.fade-exit-active{
    opacity: 0;
    transition: opacity 1s ease-in;
}
.fade-exit-done{
    opacity: 0;
}

当需要对多个组件实现过渡效果时
可以用TransitionGroup嵌套CSSTransition

<TransitionGroup>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <CSSTransition
                                in={this.state.show}
                                timeout={1000}
                                classNames='fade'
                                unmountOnExit
                                onEnter={(el)=>{
                                    el.style.color='blue'
                                }}
                                appear={true}
                                key={index}
                            >
                                <div>{item}</div>
                            </CSSTransition>
                        )
                    })
                }
                </TransitionGroup>