使用Swiper回调和Jquery对幻灯片中的元素进行动画处理
[英]Using Swiper callback and Jquery to animate elements within Slideshows
问题描述
I recently picked up Swiper.js. 
我最近捡起Swiper.js。 I decided to make a slideshow. 我决定进行幻灯片放映。 These work great. 这些工作很棒。 Now I wanted to animate elements within every slide separately, I figured the best way of doing so is using callback that has been provided by Swiper.js. 现在，我想分别为每张幻灯片中的元素设置动画，我认为最好的方法是使用Swiper.js提供的回调。
The very first slide works well, but upon going to the next slider (or returning to the very first slider), the animation seems to glitch. 第一个幻灯片效果很好，但是转到下一个滑块（或返回到第一个滑块）时，动画似乎出现故障。 It is as if the image is first displayed in it's animated-state and thereafter animated again. 好像该图像首先以其动画状态显示，然后再次动画化。
I made a code snippet to demonstrate the issue: 我编写了一个代码片段来演示该问题：
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>
And also a pen: http://codepen.io/RexDesign/pen/NRgJWy 还有一支笔： http : //codepen.io/RexDesign/pen/NRgJWy
What does one need to do to do to achieve a smooth animation in this case? 在这种情况下，需要做些什么才能获得流畅的动画？
Many thanks in advance. 提前谢谢了。
1 个解决方案
解决方案1
1 2017-04-22 15:34:51
adding animate class in html custom data attribute for example, 例如，在html自定义数据属性中添加动画类，
<p id="workStartPhrase" class="animated delay200ms fatten" data-animation="flipInY">Waarom zou ik?</p>
then adding swiper sliders options , as like as.. 然后添加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]);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.