反應過渡組不發射

我試圖用反應過渡組創建一個簡單的過渡，但我無法讓它工作 - 過渡不起作用。我確實使用了一個唯一的密鑰。反應過渡組不發射

的例子，我只是做了淡出部件的簡單的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

反應過渡組不發射

回答

相關問題