39 lines
909 B
JavaScript
39 lines
909 B
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({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
|
|
},
|
|
|
|
render: function() {
|
|
|
|
var topStyle = {
|
|
backgroundImage: 'url('+this.state.currSrc+')'
|
|
};
|
|
|
|
return (
|
|
<div className="crossfade-image">
|
|
<ReactCSSTransitionGroup transitionName="crossfade" transitionLeaveTimeout={2000}>
|
|
<div key={this.state.currSrc} className="top" style={topStyle}></div>
|
|
</ReactCSSTransitionGroup>
|
|
</div>
|
|
);
|
|
|
|
}
|
|
|
|
});
|