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');
|
||
|
}
|
||
|
|
||
|
});
|