国际象棋主教

Swiper Animate使用方法


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



1. 使用Swiper Animate需要先加载swiper.animate.min.jsanimate.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>

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

<script> 
//Swiper4.x
  var mySwiper = new Swiper ('.swiper-container', {
    on:{
      init: function(){
        swiperAnimateCache(this); //隐藏动画元素 
        swiperAnimate(this); //初始化完成开始动画
      }, 
      slideChangeTransitionEnd: function(){ 
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名
      } 
    }
  }) 
  </script>

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

swiper-animate-effect:切换效果,例如 fadeInUp 
swiper-animate-duration:可。???中?奔洌ǖノ幻耄,例如 0.5s
swiper-animate-delay:可。???映?#26102;?#27916;ǖノ幻耄,例如 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>

4. 可选效果参考


如果以上这些效果不能满足你的需求,你可以仿照animate.css的格式制作一些其他效果,?#25317;?#20320;自己的css文件。其他参数:transition-timing-function 。

网友贡献:可以执行两种动画的swiper.animate-twice和可在loop模式下使用的 animateControl。

Swiper论坛查看网友贡献的作品,或上传自己的作品获得积分换取其他优秀作品。

国际象棋主教
麻将作弊手势 极速快3彩票怎么玩 吉林十一选五 彩票平台代理怎么赚钱 足彩半全场中奖算法 江西快3走势图今天 老11选5玩法技巧 斯诺克吧 排列3红球杀号 澳门即时赔率-123