fullScreenAnim component

[Seasons123]

1.横幅全屏要点：
关键是在FullScreenAnim组件的最外层设置

{    width: 100%;
    height: 100%;
    position: absolute;}

[Seasons123]

page1中

const animType = {
          queue: isMode ? 'bottom' : 'right',
          one: isMode ? { y: '+=30', opacity: 0, type: 'from' }
              : { x: '-=30', opacity: 0, type: 'from' },
          two: isMode ? { y: '-=30', opacity: 0, type: 'from' }
              : {  rotate:'10deg',
                  transformOrigin:' center center',
                  repeatDelay: 0, duration: 500,
                  repeat: -1,
                  yoyo: true,}

      };

isMode是是否适配手机标志。在PC端时，上面的animType.two是设置旋转效果。并没有采用这种效果，尝试了一下不太合适。

[Seasons123]

Banner组件增加了一个布尔属性arrowDefault，是否使用默认的左右箭头。
BannerAnim.jsx中修改（如下增加了arrowDefault）：

 <Arrow arrowType="prev" key="arrowPrev" next={this.next} prev={this.prev} arrowDefault=
{this.props.arrowDefault}
      elemHeight={this.state.wrapperHeight}
 />,
<Arrow arrowType="next" key="arrowNext" next={this.next} prev={this.prev} arrowDefault=
{this.props.arrowDefault}
      elemHeight={this.state.wrapperHeight}
  />

Arrow.jsx中相应的更改：

const specialOneClass = `${className}-specialOne`;
className = !this.props.arrowDefault ? `${className} ${specialOneClass}`.trim() : `${className} 
${defaultClass}`.trim();

banner-anim.css中添加相应的样式：

/*special arrow start*/
.banner-anim-arrow-specialOne {
  position: absolute;
  width: 44px;
  width: 60px\9;
  height: 65px;
  margin-top: -30px;
  background: rgba(0, 0, 0, 0.3);
}
.banner-anim-arrow-specialOne.next {
  right: 0;
}
.banner-anim-arrow-specialOne.next:before,
.banner-anim-arrow-specialOne.next:after
 {
  width: 2px;
  height: 15px;
/*notice this path, it's just devPath, you can use it like this 'http://localhost:3000/images/
leftArrow.png' ,please remember you have put the picture under this folder(build/images) */
  background: url(../../assets/images/banner/specialOneArrow/rightArrow.png) no-repeat;
  display: block;
  content: ' ';
  position: absolute;
}
.banner-anim-arrow-specialOne.prev:before,
.banner-anim-arrow-specialOne.prev:after{
  width: 2px;
  height: 15px;
  background: url(../../assets/images/banner/specialOneArrow/leftArrow.png) no-repeat;
  display: block;
  content: ' ';
  position: absolute;
}
/*special arrow end*/

[Seasons123]

【疑问】对于最后一屏最后一个点击报名的样式，banner-anim.css中：

.banner2-icon {
  margin-top: 8px;
  position: absolute;
  left: 25%;
  bottom: -50%; /*some weird*/
}

不设置left和bottom的话，就会和“暑假期课”一行。不知道为什么会出现这种现象，left和bottom的值也是调出来的，暂时要搁浅这个项目了先记下来吧。