使用swiper 遇到的问题

1. 图片虚化

<img src="img/page1/person1.png" class="page1_person ani"
                 swiper-animate-effect="zoomIn"
                    swiper-animate-duration="1s"
                    swiper-animate-delay="0.6s">
animate.min.css 中 是这样设置的
@keyframes zoomIn{
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    -ms-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
  }
  50% {
    opacity: 1;
  }
} 

经过测试，在安卓中会出现短暂的模糊，然后变得清晰。在网上搜索解决办法，以及看其他没有这个bug 的 H5，发现 很多 h5 并不会在 img 标签上，设置动画。
经过如下设置，并测试，发现竟然解决了问题。

<div  class="page1_person ani" swiper-animate-effect="zoomIn"
                    swiper-animate-duration="1s"
                    swiper-animate-delay="0.6s">
    <img src="img/page1/person1.png"  width="100%">
</div>

我猜测把动画放在img 标签上，是 img 在执行动画，会有个过程，虚化或者不清晰；而把img放在div里面，是div在执行，而 img 只是 受父级元素限制，因此不会出现虚化或者动画完成之后有轻微移动的现象。

2 . 需要持续的动画

swiper 和 animate 主要实现了入场动画，不支持那种需要一直执行的动画。
本来以为可以直接用 animation css 设置，但是这涉及到多页的问题，也就是延迟时间的问题。

 .light{
    position: absolute;
    top: 0;
    width:2.55rem;
    left: 0;
    -webkit-animation: flash_ani 1s linear 1.4s infinite both;
    -o-animation: flash_ani 1s linear 1.4s infinite both;
    animation: flash_ani 1s linear 1.4s infinite both;
}

这个1.4s 是针对从打开第一屏页面时的持续时间，而我们要的效果是打开本屏时，针对本屏的一个持续时间；
另外还有大多h5,是可以往回切换的，时间更是不能这样简单的设置。
如需要设置有两种方案，js 和 css 方法。

js 方法

当切换到这一页，添加动画；离开这一页，删除动画。

css 方法

在 前面加上 .swiper-slide-active，这个是当前动画页的特有class名

.swiper-slide-active .light{
    position: absolute;
    top: 0;
    width:2.55rem;
    left: 0;
    -webkit-animation: flash_ani 1s linear 1.4s infinite both;
    -o-animation: flash_ani 1s linear 1.4s infinite both;
    animation: flash_ani 1s linear 1.4s infinite both;
}

以后可能还会遇到其它问题，如果遇到再更新。