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 ? +
: + null + ; + + var top = this.state.currSrc ? + : + null + ; + return (