天天看點

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動畫
},      

繼續閱讀