使用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.