Swiper插件之Animate动画

最新推荐文章于 2025-05-29 13:35:16 发布

原创最新推荐文章于 2025-05-29 13:35:16 发布 · 1.1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#swiper #动画

前端开发专栏收录该内容

18 篇文章

订阅专栏

之前一直都没有注意到Swiper插件有可供选择的动画效果插件Swiper Animate，在这个插件里面有很多可供选择的动画比如缩放、旋转、摇晃等各种动画效果。

1.在使用Swiper Animate之前，必须要保证已经加载swiper.animate.min.js和animate.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. 初始化swiper

<script>

//Swiper3.x、Swiper2.x

  var mySwiper = new Swiper ('.swiper-container', {

    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

      swiperAnimateCache(swiper); //隐藏动画元素

      swiperAnimate(swiper); //初始化完成开始动画

    },

    onSlideChangeEnd: function(swiper){

      swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

    }

  })

 

//Swiper4.x

  var mySwiper = new Swiper ('.swiper-container', {

    on:{

      init: function(){

        swiperAnimateCache(this); //隐藏动画元素

        swiperAnimate(this); //初始化完成开始动画

      },

      slideChange: function(){

        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画

      }

    }

  })

 

  </script>

</body>

3. 在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 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. 自定义动画，虽然Swiper Animate提供的动画效果已经很丰富了，但是很多时候我们会有一些其它的需求，比如我这次就需要让图片缓慢变大，参照swiper Animate的动画，实现了自己的动画

首先是加入自己的样式：

//added by Aimee

@-webkit-keyframes scaleSlow {

    0% {

        opacity: 1;

        -webkit-transform: scale(1,1);

        transform: scale(1,1);

        transition: all 5s;

    }

 

    100% {

        opacity: 1;

        -webkit-transform: scale(1.05,1.05);

        transform: scale(1.05,1.05);

        transition: all 5s;

        

    }

}

 

@keyframes scaleSlow {

    0% {

        opacity: 1;

        -webkit-transform: scale(1,1);

        transform: scale(1,1);

        transition: all 5s;

    }

 

    100% {

        opacity: 1;

        -webkit-transform: scale(1.05,1.05);

        transform: scale(1.05,1.05);

        transition: all 5s;

        

    }

}

 

.scaleSlow {

    -webkit-animation-name: scaleSlow;

    animation-name: scaleSlow;

}

然后在结构中使用自定义的动画：

 <div class="swiper-slide">

      <img class="ani" swiper-animate-effect="scaleSlow" swiper-animate-duration="5s" src="images/banner01.jpg" alt="banner" title="banner">

</div>

JS与正常引用动画时一样，这样就实现了自定义的动画了。