Browse Source

Crossfade fonctionnel

upgrade-electron
wpetit 4 years ago
parent
commit
5f4f49f2b6
2 changed files with 26 additions and 14 deletions
  1. +2
    -11
      css/style.css
  2. +24
    -3
      src/components/launcher/crossfade-image.js

+ 2
- 11
css/style.css 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 {

+ 24
- 3
src/components/launcher/crossfade-image.js 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 });
}
}

});

Loading…
Cancel
Save