反应过渡组未触发答案

【问题标题】：React Transition group not firing反应过渡组未触发
【发布时间】：2015-04-02 03:46:24
【问题描述】：

我尝试使用 react 转换组创建一个简单的转换，但我无法让它工作 - 转换不起作用。我确实使用了唯一的密钥。

对于示例，我只是做了一个简单的 2 图像淡入淡出组件：

var ReactCSSTransitionGroup = React.addons.TransitionGroup;

var Image = React.createClass({

    getInitialState: function () { 

        return ({imglink: 'http://belaumi.com/wp-content/uploads/2014/11/3D-Animated-Frog-Image.jpg', status: 1})
    },

    update: function () {

        console.log(this);
        if (this.state.status==1)
        {
            this.setState({ imglink: 'http://www.codefuture.co.uk/projects/imagehost/demo/di/KXY1/Image-b%C3%A9b%C3%A9-facebook-8.jpg', status:2})

        } else {

            this.setState({ imglink: 'http://belaumi.com/wp-content/uploads/2014/11/3D-Animated-Frog-Image.jpg', status:1})
        }
    } , 

    render: function ()  {

        return (
      <div>
          <div className='container'>
          <button onClick={this.update.bind(this)}>Click</button>
            <ReactCSSTransitionGroup transitionName="example">
          <img key={this.state.status} src={this.state.imglink}/>
        </ReactCSSTransitionGroup>
        </div>
      </div>
    );
  }
    });

    React.render(
        <div>
            <Image/>
        </div>,
        document.getElementById('reactbody')
    )

</script>

我还包含了适当的 css：

.example-enter {
    opacity: 0.01;
    transition: opacity .5s ease-in;
    -webkit-transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
    opacity: 1;
}

.example-leave {
    opacity: 1;
    transition: opacity .5s ease-in;
    -webkit-transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
    opacity: 0.01;
}

知道为什么这不起作用吗？图像确实会切换，但不会褪色..

谢谢！

【问题讨论】：

标签： reactjs reactcsstransitiongroup

【解决方案1】：

插件名称是 CSSTransitionGroup:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

而不是

var ReactCSSTransitionGroup = React.addons.TransitionGroup;

（注意 CSSTransitionGroup）

工作 jsfiddle：http://jsfiddle.net/wvt30ocx/

【讨论】：