swiper动画通过事件主动触发。

[竹叶网]

在swiper4.x版本。主动触发动画。

html:
<div class="swiper-slide">
<img id="bagsAni" swiper-animate-effect="bounceIn" swiper-animate-duration="2s" swiper-animate-delay="0.3s" src="../img/gift.png"/>
</div>
js:
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})


$(".reduce").on("touchstart",function(){
$("#bagsAni").addClass("ani bounceIn animated");//添加swiper需要的
var timer = null;
clearTimeout(timer);
timer = setTimeout(function(){//清除类
$("#bagsAni").removeClass("ani bounceIn animated");
},1000);//动画执行的时间长度
});