Javascript swiper.js-幻灯片更改时的幻灯片CSS动画问题
需要帮助-我必须在swiper.js上应用CSS动画Javascript swiper.js-幻灯片更改时的幻灯片CSS动画问题,javascript,jquery,css,Javascript,Jquery,Css,需要帮助-我必须在swiper.js上应用CSS动画 当swiper幻灯片出现在当前幻灯片上时,所有元素都应用淡入效果 当滑动滑块离开当前滑块时,所有元素在离开当前滑块之前应用淡出效果 所有幻灯片效果相同,请帮助 var animEndEv = 'webkitAnimationEnd animationend'; swiper.on('slideChangeTransitionStart', function () { var swiperIndex = swiper.activeIndex;
var animEndEv = 'webkitAnimationEnd animationend';
swiper.on('slideChangeTransitionStart', function () {
var swiperIndex = swiper.activeIndex;
switch(swiperIndex){
case 0:
var findele = $('.slide-1').find(".animated");
findele.each(function() {
var $this = $(this);
$this.addClass('fadeInDown', 700).on(animEndEv, function() {
$this.removeClass('fadeInDown');
});
});
$('.swiper-pagination-bullets-manual li').removeClass('active');
$('.swiper-pagination-bullets-manual li.link1').addClass('active');
break;
case 1:
$('.swiper-pagination-bullets-manual li').removeClass('active');
$('.swiper-pagination-bullets-manual li.link2').addClass('active');
break;
case 2:
$('.swiper-pagination-bullets-manual li').removeClass('active');
$('.swiper-pagination-bullets-manual li.link3').addClass('active');
break;
case 3:
$('.swiper-pagination-bullets-manual li').removeClass('active');
$('.swiper-pagination-bullets-manual li.link4').addClass('active');
break;
}
});
@巴赫曼:请在一个在线编辑器中主持演示,以便更好地了解这个问题