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的动画样式，只是它对组件的生命周期做了进一步处理，使动画能存在于整个组件的生命周期。