Skip to content

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

Notifications You must be signed in to change notification settings

929467350/swiper.animate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

swiper.animate

demo:传送门

1.引入模块


let swiperAnimate=window.swiperAnimate;

2.初始化


let mySwiper = new Swiper ('.swiper-container', {
    on:{
      init: function(){
        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":"fadeInLeft","duration":1,"loop":1,"delay":0}]'>内容 </p>
</div>
   // 动态设置动画
    let ani = [{"value": "fadeInRight","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();
    }

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published