reactjs - 反应过渡组未触发

Question

我试图用反应过渡组创建一个简单的过渡，但我无法让它工作 - 过渡不起作用。我确实使用了唯一的密钥。

例如，我只是做了一个简单的 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;
}

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

谢谢！

Answer 1

插件名称是 CSSTransitionGroup：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

代替

var ReactCSSTransitionGroup = React.addons.TransitionGroup;

（注意CSS过渡组）

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