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

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

本帖最后由 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();
      }















Airsola513 发表于 2020-3-8 12:02:28

666 ，这个看上去很赞那

calvin 发表于 2020-4-16 13:51:00

这个效果很多人都想要，不知道调试起来会不会麻烦呢 :handshake

bbbbbbb 发表于 2020-5-26 11:30:10

Airsola513 发表于 2020-3-8 12:02
666 ，这个看上去很赞那

:lol 谢谢

bbbbbbb 发表于 2020-5-26 11:32:16

calvin 发表于 2020-4-16 13:51
这个效果很多人都想要，不知道调试起来会不会麻烦呢

代码没有压缩 ，可根据自己需求修改:victory:

Qinver 发表于 2020-12-13 21:27:58

可以的！
页: [1]
查看完整版本: 可执行多种动画、可在loop模式下使用的swiper.animate.js