React 的 react-transition-group 参数

react-transition-group 参数

<CSSTransition
  in={
    
    this.state.show}
  timeout={
    
    1000}
  classNames='fade'
  unmountOnExit
  onEntered={
    
    (el) => {
    
    }}
  appear={
    
    true}
>

</CSSTransition>

in参数: CSSTransition 自动往 div 上加样式, 那么它要知道何时该增加什么样式. 用来感知当前动画的状态. 或者说知道接下来要执行什么样的切换.
timeout参数: 这个动画要执行多久, 单位毫秒
==挂载 css 样式: ==

fade-enter: 入场动画执行的第一个时刻, csstransition 这个组件会往 div 标签上挂载一个样式, 这个样式就是 fade-enter. 也就是入场动画, 刚要执行的一瞬间,但是还没入场的时候
fade-active: 入场动画执行的第二个瞬间到入场动画执行完的时刻, div 标签上一直有这个样式. 执行完之后就不存在了
fade-enter-done: 当整个入场动画完成之后.
exit
exit-active
exit-done

unmountOnExit: 动画结束 dom 消失
onEntered: 当入场动画结束之后, 这个钩子被执行. 它接收一个参数, 这个参数就是内部的 div 元素
appear: 让组件第一次展示在页面上的时候, 也要动画效果. 就是在入场的时候增加 css 属性