Crossfade fonctionnel

This commit is contained in:
wpetit 2015-10-29 09:36:42 +01:00
parent 6ec432dab7
commit 5f4f49f2b6
2 changed files with 26 additions and 14 deletions

View File

@ -319,22 +319,13 @@ html, body {
/* Animations */
.crossfade-enter {
opacity: 0.01;
}
.crossfade-enter.crossfade-enter-active {
opacity: 1;
transition: opacity 250ms ease-in;
}
.example-leave {
.crossfade-leave {
opacity: 1;
}
.crossfade-leave.crossfade-leave-active {
opacity: 0.01;
transition: opacity 250ms ease-in;
transition: opacity 500ms ease-in-out;
}
.pulse {

View File

@ -16,7 +16,7 @@ module.exports = React.createClass({
},
componentWillReceiveProps: function(nextProps) {
this.setState({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
this.setState({ nextSrc: nextProps.src, currSrc: this.state.currSrc });
},
render: function() {
@ -25,14 +25,35 @@ module.exports = React.createClass({
backgroundImage: 'url('+this.state.currSrc+')'
};
var bottomStyle = {
backgroundImage: 'url('+this.state.nextSrc+')',
};
var bottom = this.state.nextSrc ?
<div key={this.state.nextSrc} className="bottom" style={bottomStyle}></div> :
null
;
var top = this.state.currSrc ?
<div key={this.state.currSrc} className="top" style={topStyle}></div> :
null
;
return (
<div className="crossfade-image">
<ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
<div key={this.state.currSrc} className="top" style={topStyle}></div>
{bottom}
<ReactCSSTransitionGroup transitionName="crossfade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
{top}
</ReactCSSTransitionGroup>
</div>
);
},
componentDidUpdate: function() {
if(this.state.nextSrc !== this.state.currSrc) {
this.setState({ currSrc: this.state.nextSrc });
}
}
});