diff --git a/css/style.css b/css/style.css
index 92e6a6c..d2ca632 100644
--- a/css/style.css
+++ b/css/style.css
@@ -59,8 +59,8 @@ html, body {
z-index: -1;
}
-.launcher .crossfade-image > .top,
-.launcher .crossfade-image > .bottom {
+.launcher .crossfade-image .top,
+.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;
}
diff --git a/package.json b/package.json
index b0cb5f2..50c7061 100644
--- a/package.json
+++ b/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"
diff --git a/src/app.js b/src/app.js
index 00103b2..1498abb 100644
--- a/src/app.js
+++ b/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(
- { function() { return ; } }
+
,
document.body
diff --git a/src/components/edit/tree-item.js b/src/components/edit/tree-item.js
index 0d3c05a..fc5a6c9 100644
--- a/src/components/edit/tree-item.js
+++ b/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;
diff --git a/src/components/launcher/crossfade-image.js b/src/components/launcher/crossfade-image.js
index 446fae6..37f01c4 100644
--- a/src/components/launcher/crossfade-image.js
+++ b/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 = {};
-
- if(this.state.prevSrc) {
- topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
- }
-
- var bottomStyle = {
+ var topStyle = {
backgroundImage: 'url('+this.state.currSrc+')'
};
return (
);
- },
-
- componentDidUpdate: function() {
- this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
}
});
diff --git a/src/components/mixins/lazy-load.js b/src/components/mixins/lazy-load.js
index 7b3dd57..835a60a 100644
--- a/src/components/mixins/lazy-load.js
+++ b/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;