Base crossfade + passage a React 0.14

This commit is contained in:
wpetit 2015-10-28 17:22:14 +01:00
parent 2296d257dd
commit 6ec432dab7
6 changed files with 36 additions and 23 deletions

View File

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

View File

@ -25,8 +25,10 @@
"glob": "^5.0.14", "glob": "^5.0.14",
"ini": "^1.3.4", "ini": "^1.3.4",
"lodash": "^3.10.1", "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-dnd": "^1.1.5",
"react-dom": "^0.14.0",
"react-redux": "^2.0.0", "react-redux": "^2.0.0",
"redux": "^2.0.0", "redux": "^2.0.0",
"redux-thunk": "^0.1.0" "redux-thunk": "^0.1.0"

View File

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

View File

@ -1,4 +1,4 @@
var React = require('react/addons'); var React = require('react');
var classNames = require('classnames'); var classNames = require('classnames');
var AppIcon = require('../common/app-icon.js'); var AppIcon = require('../common/app-icon.js');
var DragSource = require('react-dnd').DragSource; var DragSource = require('react-dnd').DragSource;

View File

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

View File

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