swiper.animate~之~能夠執行兩種動畫的升級版的Swiper Animate

時間 2019-11-29

標籤 swiper.animate swiper animate 能夠執行兩種動畫升級版简体版

原文原文鏈接

1.下載插件swiper.animate-twice.min.js，加載進頁面。

    <!DOCTYPE html>
    <html>
    <head>
        ...
        <link rel="stylesheet" href="path/to/swiper.min.css">
        <link rel="stylesheet" href="path/to/animate.min.css">
    </head>
    <body>
        ...
        <script src="path/to/swiper.min.js"></script>
        <script src="path/to/swiper.animate-twice.min.js"></script>
    </body>
    </html>

2.初始化css

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

3.在須要動畫的元素上添加代碼html

    <div class="swiper-slide a">
                <div class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">內容1</div>
            </div>