Crossfade fonctionnel
This commit is contained in:
parent
6ec432dab7
commit
5f4f49f2b6
|
@ -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 {
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue