貓頭鷹輪播幻燈片中的元素在動畫開始之前顯示(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');})});
貓頭鷹輪播幻燈片中的元素在 css 動畫發生之前顯示
喵喔喔
2021-10-21 15:40:33