反应过渡组不发射

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

的例子，我只是做了淡出部件的简单的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; 
}

任何想法，为什么这是不工作？图像切换，但不褪色..

谢谢！

来源

2015-04-01 avieln

的插件名称是CSSTransitionGroup：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

，而不是

var ReactCSSTransitionGroup = React.addons.TransitionGroup;

（注意CSS TransitionGroup）

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

来源

2015-04-01 19:46:24 al8anp

反应过渡组不发射

回答

相关问题