Swiper 中 Animate 动画使用方法

发布于 2019-11-13 字数 2096 浏览 2290 评论 0

Swiper Animate 是 Swiper 中文网提供的用于在 Swiper 内快速制作 CSS3 动画效果的小插件，适用于 Swiper2.x 和 Swiper3.x ，此插件不适用于 loop 模式。

引入文件

使用 Swiper Animate 需要先加载 swiper.animate.min.js 和 animate.min.css。

<!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.min.js"></script>
</body>
</html>

初始化 Swiper

初始化时隐藏元素并在需要的时刻开始动画。

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

添加动画样式

在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate 需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp"
   swiper-animate-duration="0.5s"
   swiper-animate-delay="0.3s">内容</p>
</div>

如果以上这些效果不能满足你的需求，你可以仿照 animate.css 的格式制作一些其他效果，加到你自己的 CSS 文件。其他参数 transition-timing-function ，可以执行两种动画的 swiper.animate-twice 和可在 loop 模式下使用的 animateControl。

关注 0