七夕当天趁午休两小时看API临时做的,敬还在为项目辛苦战斗的你们。
/**
* @createDate 2018 on Double Seventh Festival
* @Wish All shall be well.
*/
/**
*引入图片
*/
import homeImage from '../assets/homeImage.jpg';
import festivalMoonCake from '../assets/festivalMoonCake.jpg';
import festivalDoubleSeventh from '../assets/festivalDoubleSeventh.jpg';
/**
*引入依赖
*/
import QueueAnim from 'rc-queue-anim';
import moment from 'moment';
/**
*state中定义图片开关
*/
state = {
showImg: true,
showPage: 'none',
};
/**
*动画离开时的回调
*/
endCall = () => {
setTimeout(() => {
this.setState({ showImg: false})
},1000)
setTimeout(() => {
this.setState({ showPage: 'block'})
},3000)
}
/**
*支持每次刷新加载不同的图片
*/
let homePageImg = homeImage;
if(moment().format('YYYY-MM-DD')=='2018-08-17'){
const randomPara = Math.floor(Math.random() * 100)%3;
switch (randomPara) {
case 0: homePageImg = festivalDoubleSeventh; break;
case 1: homePageImg = festivalMoonCake; break;
case 2: homePageImg = homeImage; break;
default: homePageImg = homeImage; break;
}
}
/**
*动画实现代码
*/
const layoutImg = (
type={['bottom', 'top']} ease={['easeOutQuart', 'easeInOutQuart']} duration={4000} onEnd={this.endCall} > {this.state.showImg ? [ style ={{width: '100%'}} />] : null}
);
/**
*出现动画时页面已经隐藏加载
*/
const layout = (
你负责显示整个页面的jsx
/**
*最后的显示
*/
return(
{params =>
)