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；

• 常见属性如下：

1. in：触发进入或者退出状态

0、如果添加了 unmountOnExit={true} ，那么，该组件会在执行退出动画结束后被移除掉；
	
1、当in为true时，
   触发进入状态，会添加 -enter、-enter-acitve 的class，开始执行动画
   当动画执行结束后，会移除两个class，并且添加 -enter-done 的class

2、当in为false时，
   触发退出状态，会添加 -exit、-exit-active 的class，开始执行动画
   当动画执行结束后，会移除两个class，并且添加 -enter-done 的clas

2. classNames：动画class的名称

决定了在编写css时，对应的class名称：
比如，`card-enter、card-enter-active、card-enter-done`

3. unmountOnExit：退出后卸载组件

4. appear：是否在初次进入添加动画（需要和 in同时为true）

5. timeout：过渡动画的时间

6. 对应的钩子函数，为了在动画的执行过程，来完成一些JavaScript的操作

`onEnter`：在进入动画之前，被触发
		
`onEntering`：在应用进入动画时，被触发

`onEntered`：在应用进入动画结束后，被触发

`onExit`：离开动画之前，被触发

`onExiting`：离开动画时，被触发

`onExited`：离开动画之后，被触发

CSSTransition的示例

下班了，明天再接着写