猫头鹰轮播幻灯片中的元素在 css 动画发生之前显示

Question

猫头鹰轮播幻灯片中的元素在动画开始之前显示（fadeInUp 和 zoomIn）。它们不应该在动画之前可见。在第一张幻灯片中，它们表现良好，但在第二张幻灯片中，您可以看到它们总是在 css 动画发生之前出现。

检查这个小提琴：https : //jsfiddle.net/6k8agot1/

//Start Hero slider initialize code

$(document).ready(function(){

var heroSlider = $('.owl-carousel');

heroSlider.owlCarousel({

animateOut: 'fadeOut',

animateIn: 'fadeIn',

autoplayTimeout:5000,

autoplayHoverPause: true,

loop: true,

margin: 0,

nav: false,

mouseDrag:false,

touchDrag:true,

pullDrag:false,

freeDrag:false,

dots:true,

autoplay:true,

responsive: {

0: {

items: 1

},

600: {

items: 1

},

1000: {

items: 1

}

}

});

// End Hero slider initialize code

// Start Reactivate css animation every time a slide is loaded

heroSlider.on("changed.owl.carousel", function(event){

// selecting the current active item

var item = event.item.index-2;

// first removing animation for all captions

$('h1, p').removeClass('fadeInUp');

$('a').removeClass('zoomIn');

$('.owl-item').not('.cloned').eq(item).find('h1, p').addClass(' fadeInUp');

$('.owl-item').not('.cloned').eq(item).find('a').addClass(' zoomIn');

})

});

Answer 1

出现您的问题是因为您是在幻灯片切换完成后进行更改。使用 ' translate ' 事件而不是 ' changed ' 应该会有所帮助。尝试改变heroSlider.on("改变了.owl.carousel", function(event){});到heroSlider.on("翻译.owl.carousel", function(event){});还要保持 owl 轮播项目中的类一致，第二个轮播项目子项中缺少动画类。<h1 class="animated mr-0"></h1><p class="my-1 my-md-4 animated"></p><a class=" animated"></a>