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 {
319 319
 
320 320
 /* Animations */
321 321
 
322
-.crossfade-enter {
323
-  opacity: 0.01;
324
-}
325
-
326
-.crossfade-enter.crossfade-enter-active {
327
-  opacity: 1;
328
-  transition: opacity 250ms ease-in;
329
-}
330
-
331
-.example-leave {
322
+.crossfade-leave {
332 323
   opacity: 1;
333 324
 }
334 325
 
335 326
 .crossfade-leave.crossfade-leave-active {
336 327
   opacity: 0.01;
337
-  transition: opacity 250ms ease-in;
328
+  transition: opacity 500ms ease-in-out;
338 329
 }
339 330
 
340 331
 .pulse {

+ 24
- 3
src/components/launcher/crossfade-image.js View File

@@ -16,7 +16,7 @@ module.exports = React.createClass({
16 16
   },
17 17
 
18 18
   componentWillReceiveProps: function(nextProps) {
19
-    this.setState({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
19
+    this.setState({ nextSrc: nextProps.src, currSrc: this.state.currSrc });
20 20
   },
21 21
 
22 22
   render: function() {
@@ -25,14 +25,35 @@ module.exports = React.createClass({
25 25
       backgroundImage: 'url('+this.state.currSrc+')'
26 26
     };
27 27
 
28
+    var bottomStyle = {
29
+      backgroundImage: 'url('+this.state.nextSrc+')',
30
+    };
31
+
32
+    var bottom = this.state.nextSrc ?
33
+      <div key={this.state.nextSrc} className="bottom" style={bottomStyle}></div> :
34
+      null
35
+    ;
36
+
37
+    var top = this.state.currSrc ?
38
+      <div key={this.state.currSrc} className="top" style={topStyle}></div> :
39
+      null
40
+    ;
41
+
28 42
     return (
29 43
       <div className="crossfade-image">
30
-        <ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
31
-          <div key={this.state.currSrc} className="top" style={topStyle}></div>
44
+        {bottom}
45
+        <ReactCSSTransitionGroup transitionName="crossfade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
46
+          {top}
32 47
         </ReactCSSTransitionGroup>
33 48
       </div>
34 49
     );
35 50
 
51
+  },
52
+
53
+  componentDidUpdate: function() {
54
+    if(this.state.nextSrc !== this.state.currSrc) {
55
+      this.setState({ currSrc: this.state.nextSrc });
56
+    }
36 57
   }
37 58
 
38 59
 });

Loading…
Cancel
Save