react CSSTransition 参数

标签包裹的元素会有动画效果

 

in 为控制动画开启关闭的“开关”，true为开启，false为关闭
classNames 为对应的样式类名，和下面的css内的名字对应
timeout 为动画执行时间
unmountOnExit 当动画效果为隐藏时，该标签会从dom树上移除，类似js操作
appear 是否第一次加载该组件时启用相应的动画渲染，css文件中有含有appear的均和此标签相关
onEntered 入场动画结束时触发的钩子
onEnter入场动画第一帧时执行
onEntering当入场动画执行到第二帧时执行
onExit出场动画第一帧时执行
onExiting出场动画第二帧时执行
onExited整个动画出场结束时执行

 css样式

/*入场动画开始*/
.fade-enter {
  opacity: 0;
}

/*入场动画过程*/
.fade-enter-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;
}

/*页面第一次加载时的开始状态*/
.fade-appear {
  opacity: 0;
}

/*页面第一次加载时的动画过程*/
.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}