reactjs - React Transition グループが発火しない

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;
}

なぜこれが機能しないのですか？画像は切り替わりますが、フェードしません..

ありがとう！