使用Swiper回調和Jquery對幻燈片中的元素進行動畫處理
[英]Using Swiper callback and Jquery to animate elements within Slideshows
問題描述
我最近撿起Swiper.js。 我決定進行幻燈片放映。 這些工作很棒。 現在，我想分別為每張幻燈片中的元素設置動畫，我認為最好的方法是使用Swiper.js提供的回調。
第一個幻燈片效果很好，但是轉到下一個滑塊（或返回到第一個滑塊）時，動畫似乎出現故障。 好像該圖像首先以其動畫狀態顯示，然后再次動畫化。
我編寫了一個代碼片段來演示該問題：
html, body { position: relative; height: 100%; } body { background: url(../../img/BannerEmpty.png); background-repeat: no-repeat; background-size: cover; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; text-align:center; } p { font-family: 'Architects Daughter', cursive; font-size: 40px; justify-content: flex-start; color: #3C3C3B; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; margin:auto; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #swipeLeft { margin: 0 20px 0 0 } #swipeRight { margin: 0 0 0 20px }
<link href="http://brickhunters.ddns.net/swiperslider/dist/css/swiper.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8"> <title>Test animations in Swiper</title> <link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Archivo+Black" rel="stylesheet"> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p id="swipeLeft">Slide from left!</p> <p id="swipeRight">Slide from right!</p> </div> <div class="swiper-slide"> <p id="swipeLeft">Why wont you work!</p> <p id="swipeRight">Argh #$!?%#@&=</p> </div> <div class="swiper-slide"> <img width="250px"id="swipeLeft" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"></img> <img width="250px" id="swipeRight" src="http://www.memes.at/faces/tears_in_the_eyes.jpg"></img> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> </div> <!-- Swiper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://brickhunters.ddns.net/swiperslider/dist/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 3000, autoplayDisableOnInteraction: false, loop: true, onSlideChangeStart: function (s) { var currentSlide = $(s.slides[s.activeIndex]); currentSlide.find('#swipeLeft').removeClass('animated slideInLeft'); currentSlide.find('#swipeRight').removeClass('animated slideInRight'); }, onSlideChangeEnd: function (s) { var currentSlide = $(s.slides[s.activeIndex]); currentSlide.find('#swipeLeft').addClass('animated slideInLeft'); currentSlide.find('#swipeRight').addClass('animated slideInRight'); } }); </script> </body> </html>
還有一支筆： http : //codepen.io/RexDesign/pen/NRgJWy
在這種情況下，需要做些什么才能獲得流暢的動畫？
提前謝謝了。
1 個解決方案
解決方案1
1 2017-04-22 15:34:51
例如，在html自定義數據屬性中添加動畫類，
<p id="workStartPhrase" class="animated delay200ms fatten" data-animation="flipInY">Waarom zou ik?</p>
然后添加swiper滑塊選項，如..
var animEndEv = 'webkitAnimationEnd animationend';
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 0,
autoplayDisableOnInteraction: false,
loop: true,
onSlideChangeStart: function(s) {
var currentSlide = $(s.slides[s.activeIndex]);
var elems = currentSlide.find(".animated")
elems.each(function() {
var $this = $(this);
var animationType = $this.data('animation');
$this.addClass(animationType, 100).on(animEndEv, function() {
$this.removeClass(animationType);
});
});
},
onSlideChangeEnd: function(s) {
var currentSlide = $(s.slides[s.activeIndex]);
}
});
滑動幻燈片-使用animate.css動畫幻燈片中的元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.