使用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>

以上纯属个人想法，如有不妥还请指正！

 

转载于:https://www.cnblogs.com/GaiaBing/p/5751216.html