猫头鹰轮播幻灯片中的元素在 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 loadedheroSlider.on("changed.owl.carousel", function(event){// selecting the current active itemvar 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>