React动画效果

平常我们使用的动画效果大多和jQuery.animate()相关，但是React就是被用来取代jQuery的。所以在动画实现的选择上我们常常选择CSS3的原生支持来实现。

但是，CSS3的动画过程是:“在什么时间范围内，以什么样的运动节奏完成动画”。在用原生CSS3实现动画时，不好调试，因为动画过程可能一闪而过，并且在React中，样式的渲染必须等到组件已经挂载完成后，那么在组件加载和卸载的过程中我们是无法实现动画的。

所以React提供了一个叫ReactCSSTransitionGroup的组件辅助实现动画功能。

ReactCSSTransitionGroup组件安装

npm install --save react-addons-css-transition-group

组件规则

组件属性

transitionAppear:false | true , 首次装载时使用。

transitionEnter:false | true, 组件挂载时使用，不包含首次挂载。

transitionLeave:false | true, 组件卸载时使用。

transitionName:String, 用户自定义样式。

transitionEnterTimeout:Number, 组件挂载时动画过度时间，单位ms。

transitionLeaveTimeout:Number, 组件卸载时动画过度时间，单位ms。

enter:挂载，leave:卸载，appear:首次挂载。这3种状态分别对应6种样式。

分别为:

[name]-enter:组件挂载前的样式。

[name]-enter-active:组件挂载完成后的样式。

[name]-leave:组件卸载前的样式。

[name]-leave-active:组件卸载完成后的样式。

[name]-appear:组件首次挂载前的样式。

[name]-appear-active:组件首次挂载完成后的样式。

示例

import React from 'react'import ReactCSSTransitionGroup from 'react-addons-css-transition-group'import "../index.css"export default class App extends React.Component {    render() {        return (            <ReactCSSTransitionGroup                transitionName='example'                transitionAppear={true}                transitionAppearTimeout={500}                >                <div className="css-test">                    Hello React CSS Transition Group！                </div>            </ReactCSSTransitionGroup>        )    }}

body {  margin: 0;  padding: 0;  font-family: sans-serif;}.css-test{  width: 300px;  height: 300px;  background-color: #b1a1a1;  text-align: center;  line-height: 300px;  margin: 100px auto;}.example-enter {  opacity: 0.01;}.example-enter.example-enter-active {  opacity: 1;  transition: opacity 500ms ease-in;}.example-leave {  opacity: 1;}.example-leave.example-leave-active {  opacity: 0.01;  transition: opacity 300ms ease-in;}.example-appear {  opacity: 0.01;}.example-appear.example-appear-active {  opacity: 1;  transition: opacity .5s ease-in;}

上面代码的效果：页面刷新时，组件会呈现淡入效果。

ReactCSSTransitionGroup并非脱了css3原生样式，反而它非常依赖css3的动画样式，只是它对组件的生命周期做了进一步处理，使动画能存在于整个组件的生命周期。