欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Swiper Animate使用方法

程序员文章站 2024-03-25 12:25:46
...
  1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。
  2. 初始化时隐藏元素并在需要的时刻开始动画。
//Swiper4.x  初始化
  var mySwiper = new Swiper ('.swiper-container', {
    on:{
      init: function(){
        swiperAnimateCache(this); //隐藏动画元素 
        swiperAnimate(this); //初始化完成开始动画
      }, 
      slideChangeTransitionEnd: function(){ 
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
      } 
    }
  }) 
  1. 在需要运动的元素上面增加类名 ani ,和其他的类似插件相同,Swiper Animate需要指定几个参数:
    swiper-animate-effect:切换效果,例如 fadeInUp
    swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
    swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s

  2. 自定义动画效果

<img class="ani pic" src="pic.jpg" swiper-animate-effect="shutter2" />

@-webkit-keyframes shutter2 {
            from {
                top: 100%;
            }
            to {
                top: 0;
            }
        }
 
        .shutter2 {
            -webkit-animation: shutter2 0.5s forwards;
            animation: shutter2 0.5s forwards;
        }
  1. 可选效果参考
    tps://daneden.github.io/animate.css/
相关标签: javascript