javascript - swiper.js - 幻灯片更改时的幻灯片 CSS 动画问题

标签 javascript jquery css

需要帮助 - 我必须在 swiper.js 上应用 CSS 动画。

  1. 当 swiper slide 出现在当前幻灯片上时,所有元素都应用淡入淡出效果。
  2. 当滑动 slider 离开当前 slider 时,所有元素在离开当前 slider 之前应用淡出效果。

所有的slide效果都是一样的,求助

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;

}
});

最佳答案

@bahman:请在在线编辑器中主持演示,以便更清楚地了解问题

关于javascript - swiper.js - 幻灯片更改时的幻灯片 CSS 动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51905984/

相关文章:

javascript - 如何在 CSS 中创建箭头(3 行)?

javascript - 如何根据滚动位置缩小图像宽度

JavaScript 有条件地没有像我期望的那样短路

javascript - jQuery 自动完成过滤器按首字母匹配

javascript - Jquery - 检测输入之外的点击

html - 如何按比例缩放到 parent ?

javascript - handlebars #每个数组都是助手

javascript - 在jquery数据表服务器端分页中指定页面大小

CSS 将一组绝对定位的 div 的边界框居中

html - 如何减少文字动画中的特定文字大小?