Swiper 中 Animate 动画使用方法 - 文章教程

Swiper 中 Animate 动画使用方法

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

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

Swiper 中 Animate 动画使用方法

引入文件

使用 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。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论