Swiper外掛之Animate動畫
阿新 • • 發佈：2019-01-02
之前一直都沒有注意到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與正常引用動畫時一樣，這樣就實現了自定義的動畫了。