可执行多种动画、可在loop模式下使用的swiper.animate.js

bbbbbbb · 发表于 2020-1-20 13:35:17

本帖最后由 bbbbbbb 于 2020-1-20 17:26 编辑

github ：传送门

demo  ：传送门

1.引入模块
import {swiperAnimate,swiperAnimateCache} from 'swiper.animate.js'
或者
let swiperAnimate=window.swiperAnimate;
let swiperAnimateCache=window.swiperAnimateCache;
2.初始化
var mySwiper = new Swiper ('.swiper-container', {
on:{
   init: function(){
      swiperAnimateCache(this); //隐藏动画元素
      swiperAnimate(this); //初始化完成开始动画
   },
   slideChange: function(){
      swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
   }
}
  })
3.在需要运动的元素上面增加类名 ani ，swiper.animate需要指定几个参数：
value：切换效果，例如 fadeInUp
delay：动画延迟时间，例如 0.3s
loop：    动画循环次数，例如 1 (0为无限次)
duration：动画持续时间，例如 0.5s

<div class="swiper-slide">
   <p class="ani"
      swiper-animate-effect='[{"value":"fadeInRight","duration":1,"loop":1,"delay":0},{"value":"fadeInLeft","duration":1,"loop":2,"delay":0}]'>
      slider1</p>
</div>

// 动态设置动画
      let ani = [{
         "value": "fadeInRight",
         "duration": 1,
         "loop": 1,
         "delay": 0
      }, {
         "value": "fadeInLeft",
         "duration": 1,
         "loop": 1,
         "delay": 0
      }, {
         "value": "fadeIn",
         "duration": 1,
         "loop": 1,
         "delay": 0
      }, ];
      for (let i = 0; i < 3; i++) {
         let div = document.createElement('div');
         let p = document.createElement('p');
         p.innerText = '这是一个新的Slide';
         p.className = 'ani';
         p.setAttribute('swiper-animate-effect', JSON.stringify(ani));
         div.appendChild(p);
         div.className = 'swiper-slide';
         mySwiper.addSlide(1, div);
         mySwiper.updateSlides();
      }