Crossfade fonctionnel

css/style.css

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

src/components/launcher/crossfade-image.js

@@ -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}>
+        {bottom}
-          <div key={this.state.currSrc} className="top" style={topStyle}></div>
+        <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 });
+    }
   }
 
 });