使用swiper.animate時，給一個對象添加兩個動畫且動畫循環的方法

swiper官網上給對象加一個動畫的方法是

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">內容</p>
</div>

js代碼為

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隱藏動畫元素 
    swiperAnimate(swiper); //初始化完成開始動畫
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫
  } 
  })        
  </script>
</body>

然而我們想讓這個對象進場后再循環執行一個動畫效果，如心跳

這時我們需要用到swiper的一個屬性——mySwiper.activeIndex  返回當前活動塊的索引

我們用這個屬性判斷滑到哪一張時執行一個命令，即：再執行下一個動畫就行了

因為添加動畫后會把上一個動畫給覆蓋掉，所以需要加一個定時器

比如我們在對象進場后加這個閃爍的動畫

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隱藏動畫元素
            swiperAnimate(swiper); //初始化完成開始動畫
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每個slide切換結束時也運行當前slide動畫
            switch (swiper.activeIndex) {
                case 1:
                    setTimeout(function(){
                        $("p").css({
                            animation: 'flash 1s linear 0s infinite'
                        })
                    },500);//定時器時間是上一個動畫執行時間
                    break;
                case 2:
            }
        }
    })
</script>

以上純屬個人想法，如有不妥還請指正！