Question

我尝试使用react transition group创建一个简单的转换，但我无法让它工作 - 转换不起作用。我确实使用了一把独特的钥匙。

对于这个例子我只是在淡出组件中做了一个简单的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 TransitionGroup）

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

React Transition组未触发

1 个答案: