React过渡动画-8

yarn安装 yarn add react-transition-group

react-transition-group 介绍

Transition

该组件是一个和平台无关的组件（不一定要结合CSS）；

CSSTransition

CSSTransition 是基于Transition组件构建的；
在执行的过程中有三个状态：appear,enter,exit；

三种状态需要定义对应的CSS样式：
开始状态，对应的类是 -appear、-enter、-exit；
执行状态，对应的类是 -appear-active、-enter-active、-exit-active；
结束状态，对应的类是 -appear-done、-enter-done、-exit-done；

CSSTransition常见对应的属性

in： 触发进入或者退出状态，布尔值；
当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
classNames：动画class的名称；
timeout：过渡动画的时间，控制类添加的时间；
appear：是否在初次进入添加动画（需要和in同时为true）；
unmountOnExit：该组件是否在执行退出动画结束后被移除掉；

CSSTransition对应的钩子函数

onEnter：在进入动画之前被触发；
onEntering：在进入动画时被触发；
onEntered：在进入动画完成后被触发；
onExit：在退出动画之前被触发；
onExiting：在退出动画时被触发；
onEnxited：在退出动画完成后被触发；

SwitchTransition

两个组件显示和隐藏切换时，使用该组件；
两个组件之间切换的炫酷动画；

SwitchTransition常见对应的属性

mode，有两个值
in-out： 表示新组件先进入，旧组件再移除；
out-in： 表示就组件先移除，新组建再进入；

如何使用SwitchTransition

SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件；
SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性；

TransitionGroup

将多个动画组件包裹在其中，一般用于列表中元素的动画；