首页 > 代码库 > swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

2024-08-18 10:55:30   218人阅读

 
 
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.初始化

    <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.在需要动画的元素上添加代码

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

 

4.说明

在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画
参数是一致的。

 

at         500        from  bounceInRight         use     swing       during     500
在   多少时间开始       以      什么动画           使用    什么速度    动画用时    多少  （force 是否使用 只在出场的时候判断）

 

at        后面跟的是     动画延迟时间
from     后面跟的是    动画样式
use       后面跟的是    动画力度
during   后面跟的是    动画持续时间
force     后面跟的是    是否使用 只有在出场动画的时候使用。进场动画无效。。
出场动画执行时间 =进场等待时间（at）+进场动画执行时间（during）+出场等待时间(at)

swiper.animate~之~可以执行两种动画的升级版的Swiper Animate


联系
我们