天天看点

swiper3 h5 动画设置 以及swiper动画效果不显示问题

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s">slider1</div>
    <div class="swiper-slide">slider2
        <div class="childbox" swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s"></div>
    </div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container', {
	// swiper动画设置
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeStart: function(swiper) {
            swiperAnimate(swiper); //每个slide切换前时也运行当前slide动画
        },
        // onSlideChangeEnd: function(swiper){
        //     swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        // },
})
</script>
           

slide及其里面的元素都可以使用swiper动画,因为初始swiper动画是根据onSlideChangeEnd(),即slide发生的切换变化,如果初始swiper时,设置noSwiper:true;则动画不能出现,因为swiper没有切换变化。

此时采取第二种方案:

mySwiper.slideTo(index, speed, runCallbacks) 即mySwiper.slideTo(index, speed, true)

runCallbacks:可选,boolean,设置为false时不会触发onSlideChange回调函数。

而且此时采用

onSlideChangeStart: function(swiper) {
    swiperAnimate(swiper); //每个slide切换前时也运行当前slide动画
},      

继续阅读