60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
/* jshint node: true */
|
|
var React = require('react');
|
|
var AnimateMixin = require('../mixins/animate');
|
|
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
|
|
|
|
module.exports = React.createClass({
|
|
|
|
mixins: [AnimateMixin],
|
|
|
|
propTypes: {
|
|
src: React.PropTypes.string
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return { currSrc: null, prevSrc: null };
|
|
},
|
|
|
|
componentWillReceiveProps: function(nextProps) {
|
|
this.setState({ nextSrc: nextProps.src, currSrc: this.state.currSrc });
|
|
},
|
|
|
|
render: function() {
|
|
|
|
var topStyle = {
|
|
backgroundImage: 'url('+this.state.currSrc+')'
|
|
};
|
|
|
|
var bottomStyle = {
|
|
backgroundImage: 'url('+this.state.nextSrc+')',
|
|
};
|
|
|
|
var bottom = this.state.nextSrc ?
|
|
<div key={this.state.nextSrc} className="bottom" style={bottomStyle}></div> :
|
|
null
|
|
;
|
|
|
|
var top = this.state.currSrc ?
|
|
<div key={this.state.currSrc} className="top" style={topStyle}></div> :
|
|
null
|
|
;
|
|
|
|
return (
|
|
<div className="crossfade-image">
|
|
{bottom}
|
|
<ReactCSSTransitionGroup transitionName="crossfade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
|
|
{top}
|
|
</ReactCSSTransitionGroup>
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
componentDidUpdate: function() {
|
|
if(this.state.nextSrc !== this.state.currSrc) {
|
|
this.setState({ currSrc: this.state.nextSrc });
|
|
}
|
|
}
|
|
|
|
});
|