react 的过渡动画
一、React的过渡动画
1、react-transition-group
在开发中，我们想要给一个组件的显示和消失，添加某种过渡动画，可以很好的增加用户体验，
React社区为我们提供了react-transition-group用来完成过渡动画，
React曾为开发者提供过动画插件react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition-group。
这个库可以帮助我们方便的实现，组件的 入场 和 离场 动画，
使用时需要进行额外的安装，如下：npm install react-transition-group --save
2、主要组件
-
Transition：该组件是一个和平台无关的组件（不一定要结合CSS）
在前端开发中，一般是结合CSS来完成样式，所以比较常用的是CSSTransition -
CSSTransition：在前端开发中，通常使用 CSSTransition 来完成过渡动画效果
如果只有一个组件，直接使用这个即可 -
SwitchTransition：两个组件显示和隐藏切换时，使用该组件 -
TransitionGroup：将多个动画组件包裹在其中，一般用于列表中元素的动画
CSSTransition
CSSTransition 是基于 Transition组件构建的，
-
CSSTransition执行过程中，有三个状态：
appear、enter、exit
这三种状态，需要定义对应的CSS样式：
第一类，开始状态：对应的类是 -appear、-enter、-exit
第二类：执行动画：对应的类是 -appear-active、-enter-active、-exit-active
第三类：执行结束：对应的类是 -appear-done、-enter-done、-exit-done； -
常见属性如下：
in：触发进入或者退出状态
0、如果添加了 unmountOnExit={true} ，那么，该组件会在执行退出动画结束后被移除掉；1、当in为true时，触发进入状态，会添加 -enter、-enter-acitve 的class，开始执行动画当动画执行结束后，会移除两个class，并且添加 -enter-done 的class2、当in为false时，触发退出状态，会添加 -exit、-exit-active 的class，开始执行动画当动画执行结束后，会移除两个class，并且添加 -enter-done 的clas
classNames：动画class的名称
决定了在编写css时，对应的class名称：
比如，`card-enter、card-enter-active、card-enter-done`
-
unmountOnExit：退出后卸载组件 -
appear：是否在初次进入添加动画（需要和in同时为true） -
timeout：过渡动画的时间 -
对应的钩子函数，为了在动画的执行过程，来完成一些JavaScript的操作
`onEnter`：在进入动画之前，被触发`onEntering`：在应用进入动画时，被触发`onEntered`：在应用进入动画结束后，被触发`onExit`：离开动画之前，被触发`onExiting`：离开动画时，被触发`onExited`：离开动画之后，被触发
CSSTransition的示例
下班了，明天再接着写