这是基于官方文档写的一个总结，所以对于基础的ReactCSSTransitionGroup 语法没有介绍，如果想查阅基础的语法，详见文档，文档地址
ReactCSSTransitionGroup
在react中使用动画，我们需要用到ReactCSSTransitionGroup
引入方式
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
动画原理
被ReactCSSTransitionGroup组件包裹的组件，也就是ReactCSSTransitionGroup的的children，注意，是直系孩子，在每次被添加或者被移除的时候，会被挂上相应的class。被添加的第一帧会被加上xx(transitionName)-enter，第一帧之后会再被加上xx-enter-active，被移除的第一帧会被加上xx-leave,接着是xx-leave-active。
需要注意的是，ReactCSSTransitionGroup会检测children的key，发现Key没变的时候，是不会对子组件进行类的添加的，所以，要想动画正常执行，请确保你的子组件有添加上key。
例子
下面这个例子实现了一个简单的dom切换动画，不过中间有个问题，是什么问题稍后讲，先贴代码
import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './index.css';
class Animation extends Component {
constructor() {
super();
this.state = {
type: 0
};
this.toggle = this.toggle.bind(this);
}
toggle() {
if (this.state.type === 0) {
this.setState({
type: 1
});
} else {
this.setState({
type: 0
});
}
}
render() {
return (
<div>
<h3>animation test1</h3>
<button type="button" onClick={this.toggle}>toggle</button>
<ReactCSSTransitionGroup
transitionName="test"
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
>
{this.state.type === 0 ? <div key={1}>11111111111111</div> : <div key={2}>2222222222222222</div>}
</ReactCSSTransitionGroup>
</div>
);
}
}
export default Animation;
样式
html, body {
width: 100%;
overflow: hidden;
}
.test-enter{
transform: translateX(-200px);
opacity: 0.01;
}
.test-enter.test-enter-active {
transform: translateX(0);
opacity: 1;
transition: all 500ms ease-in-out;
}
.test-leave {
transform: translateX(0);
opacity: 1;
}
.test-leave.test-leave-active {
transition: all 500ms ease-in;
opacity: 0;
transform: translateX(300px);
}
正常情况是第一个11111111从右侧滑出，然后22222222从左侧滑入，中间不应该有互相影响，但是实际上会出现这样的效果，如下图
test1.gif
稍微注意下，会发现两个div，一个移除和另一个的加入其实是同时发生的，也就是说，动画执行过程中，并不是想象中的仅存其一，而是动画的双方并存，因此想要得到理想中的效果，需要对这两个div设置下定位，将两个div都设置为absoute定位，然后就能得到想要的切换效果
test2.gif
OK，大功告成！
