Base crossfade + passage a React 0.14

css/style.css

@@ -59,8 +59,8 @@ html, body {
   z-index: -1;
 }
 
-.launcher .crossfade-image > .top,
+.launcher .crossfade-image .top,
-.launcher .crossfade-image > .bottom {
+.launcher .crossfade-image .bottom {
   position: absolute;
   left: 0;
   right: 0;
@@ -319,6 +319,24 @@ html, body {
 
 /* Animations */
 
+.crossfade-enter {
+  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;
+}
+
 .pulse {
   -webkit-animation: 1s pulse infinite;
 }

package.json

@@ -25,8 +25,10 @@
     "glob": "^5.0.14",
     "ini": "^1.3.4",
     "lodash": "^3.10.1",
-    "react": "^0.13.3",
+    "react": "^0.14.0",
+    "react-addons-css-transition-group": "^0.14.0",
     "react-dnd": "^1.1.5",
+    "react-dom": "^0.14.0",
     "react-redux": "^2.0.0",
     "redux": "^2.0.0",
     "redux-thunk": "^0.1.0"

src/app.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var ReactDOM = require('react-dom');
 var LauncherView = require('./components/launcher/launcher-view.js');
 var EditView = require('./components/edit/edit-view.js');
 var Provider = require('react-redux').Provider;
@@ -34,9 +35,9 @@ function select(state) {
 // Connect App to Redux store
 App = connect(select)(App);
 
-React.render(
+ReactDOM.render(
   <Provider store={store}>
-    { function() { return <App />; } }
+    <App />
   </Provider>
   ,
   document.body

src/components/edit/tree-item.js

@@ -1,4 +1,4 @@
-var React = require('react/addons');
+var React = require('react');
 var classNames = require('classnames');
 var AppIcon = require('../common/app-icon.js');
 var DragSource = require('react-dnd').DragSource;
@@ -10,7 +10,7 @@ var TreeItem = React.createClass({
     render: function() {
 
       var data = this.props.data;
-    
+
       var connectDragSource = this.props.connectDragSource;
       var connectDropTarget = this.props.connectDropTarget;
 

src/components/launcher/crossfade-image.js

@@ -1,6 +1,7 @@
-/* jshint node: true jsx: true */
+/* jshint node: true */
 var React = require('react');
 var AnimateMixin = require('../mixins/animate');
+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 
 module.exports = React.createClass({
 
@@ -20,27 +21,18 @@ module.exports = React.createClass({
 
   render: function() {
 
-    var topStyle = {};
+    var topStyle = {
-
-    if(this.state.prevSrc) {
-      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
-    }
-
-    var bottomStyle = {
       backgroundImage: 'url('+this.state.currSrc+')'
     };
 
     return (
       <div className="crossfade-image">
-        <div className="bottom" style={bottomStyle}></div>
+        <ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
-        <div ref="top" className="top" style={topStyle}></div>
+          <div key={this.state.currSrc} className="top" style={topStyle}></div>
+        </ReactCSSTransitionGroup>
       </div>
     );
 
-  },
-
-  componentDidUpdate: function() {
-    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
   }
 
 });

src/components/mixins/lazy-load.js

@@ -1,4 +1,4 @@
-var React = require('react');
+var ReactDOM = require('react-dom');
 
 var _listeners = [];
 
@@ -6,7 +6,7 @@ module.exports = {
 
   isInViewport: function() {
 
-    var el = React.findDOMNode(this);
+    var el = ReactDOM.findDOMNode(this);
 
     if(!el) return false;