swiper.js - slide CSS animation issue on slide change

Question

Need help - I have to apply CSS animation on swiper.js .

1. When swiper slide come on current slide all element apply fade In effect.
2. When swiper slider leave current slider all element apply fade out effect before leaving the current slider.

All slide will come with same effect, please help

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;

}
});

Answer 1

@bahman：请在在线编辑器中托管演示，以更深入地了解问题