标签：
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>
以上纯属个人想法，如有不妥还请指正！
使用swiper.animate时，给一个对象添加两个动画且动画循环的方法
标签：
原文地址：http://www.cnblogs.com/GaiaBing/p/5751216.html
