From 5f4f49f2b6ae7ea7c99fded7ed2624a7ac2f740e Mon Sep 17 00:00:00 2001
From: William Petit <wpetit@cadoles.com>
Date: Thu, 29 Oct 2015 09:36:42 +0100
Subject: [PATCH] Crossfade fonctionnel

---
 css/style.css                              | 13 ++---------
 src/components/launcher/crossfade-image.js | 27 +++++++++++++++++++---
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/css/style.css b/css/style.css
index d2ca632..b06b662 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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 {
diff --git a/src/components/launcher/crossfade-image.js b/src/components/launcher/crossfade-image.js
index 37f01c4..3cb1068 100644
--- a/src/components/launcher/crossfade-image.js
+++ b/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}>
-          <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 });
+    }
   }
 
 });