ant design实现前端预加载七夕动画
七夕当天趁午休两小时看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 = (
<QueueAnim
type={['bottom', 'top']}
ease={['easeOutQuart', 'easeInOutQuart']}
duration={4000}
onEnd={this.endCall}
>
{this.state.showImg ?
[
style ={{width: '100%'}} />]
: null}
</QueueAnim>
);
/**
*出现动画时页面已经隐藏加载
*/
const layout = (
<div style = {{display:this.state.showPage}}>
你负责显示整个页面的jsx
</div>
/**
*最后的显示
*/
return(
<DocumentTitle title={this.getPageTitle()}>
<ContainerQuery query={query>
{params => <div className={classNames(params)}>{layoutImg}{layout}</div>}
</ContainerQuery>
</DocumentTitle>
)
