react-transition-group

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

{
                        el.style.color='blue'//入场动画结束时触发
                    }}
                    appear={true}//第一次出现时也执行动画
                >
                    
hello
 

.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

                {
                    this.state.list.map((item,index)=>{
                        return (
                            {
                                    el.style.color='blue'
                                }}
                                appear={true}
                                key={index}
                            >
                                
{item}
                            
                        )
                    })
                }