看起来好像
CSSTransitionGroup是在初始安装时使用了动画，但是从React
v0.8.0开始，它不再可用。有关更多信息，请参见https://github.com/facebook/react/issues/1304。
一种解决方案是简单地安装
<h1>后
<HelloWorld>安装，如下所示：
var ReactTransitionGroup = React.addons.CSSTransitionGroup;var HelloWorld = React.createClass({ getInitialState: function() { return { mounted: false }; }, componentDidMount: function() { this.setState({ mounted: true }); }, render: function() { var child = this.state.mounted ? <h1>Hello world</h1> : null; return ( <ReactTransitionGroup transitionName="example"> {child} </ReactTransitionGroup> ); }});React.render(<HelloWorld />, document.body);实时示例
：http：//prepen.io/peterjmag/pen/wBMRPX
请注意，这
CSSTransitionGroup是为了在动态添加，删除和替换子组件时过渡它们，而不必在初始渲染时对其进行动画处理。玩这个TodoList
Codepen（从React
docs中的这个例子改编）来了解我的意思。列表项在添加和删除时会淡入和淡出，但不会在初始渲染时淡入。
编辑
：最近引入了一个新的“出现”过渡阶段，以允许在安装时使用动画效果。有关详细信息，请参见https://github.com/facebook/react/pull/2512。（该提交已经合并到master中，因此我想它将与v0.12.2一起发布。）从理论上讲，您可以执行以下操作来使
<h1>mount淡入：
JS
...<ReactTransitionGroup transitionName="example" transitionAppear={true}> <h1>Hello world</h1></ReactTransitionGroup>...CSS
.example-appear { opacity: 0.01; transition: opacity .5s ease-in;}.example-appear.example-appear-active { opacity: 1;}
