0
我试图用反应过渡组创建一个简单的过渡,但我无法让它工作 - 过渡不起作用。 我确实使用了一个唯一的密钥。反应过渡组不发射
的例子,我只是做了淡出部件的简单的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;
}
任何想法,为什么这是不工作?图像切换,但不褪色..
谢谢!