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>

)