47 lines
1015 B
JavaScript
47 lines
1015 B
JavaScript
/* jshint node: true jsx: true */
|
|
var React = require('react');
|
|
var AnimateMixin = require('../mixins/animate');
|
|
|
|
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 = {};
|
|
|
|
if(this.state.prevSrc) {
|
|
topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
|
|
}
|
|
|
|
var bottomStyle = {
|
|
backgroundImage: 'url('+this.state.currSrc+')'
|
|
};
|
|
|
|
return (
|
|
<div className="crossfade-image">
|
|
<div className="bottom" style={bottomStyle}></div>
|
|
<div ref="top" className="top" style={topStyle}></div>
|
|
</div>
|
|
);
|
|
|
|
},
|
|
|
|
componentDidUpdate: function() {
|
|
this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
|
|
}
|
|
|
|
});
|