Просмотр исходного кода

Base crossfade + passage a React 0.14

upgrade-electron
wpetit 4 лет назад
Родитель
Сommit
6ec432dab7
6 измененных файлов: 36 добавлений и 23 удалений
  1. +20
    -2
      css/style.css
  2. +3
    -1
      package.json
  3. +3
    -2
      src/app.js
  4. +2
    -2
      src/components/edit/tree-item.js
  5. +6
    -14
      src/components/launcher/crossfade-image.js
  6. +2
    -2
      src/components/mixins/lazy-load.js

+ 20
- 2
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;
}

+ 3
- 1
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"

+ 3
- 2
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

+ 2
- 2
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;


+ 6
- 14
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 (
<div className="crossfade-image">
<div className="bottom" style={bottomStyle}></div>
<div ref="top" className="top" style={topStyle}></div>
<ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
<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');
}

});

+ 2
- 2
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;


Загрузка…
Отмена
Сохранить