jquery swiper入场和出场动画

jquery swiper入场和出场动画

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

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

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=1676

发表评论

电子邮件地址不会被公开。 必填项已用*标注