亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

貓頭鷹輪播幻燈片中的元素在 css 動畫發生之前顯示

貓頭鷹輪播幻燈片中的元素在 css 動畫發生之前顯示

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

1 回答

?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

出現您的問題是因為您是在幻燈片切換完成后進行更改。使用 ' 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>


查看完整回答
反對 回復 2021-10-21
  • 1 回答
  • 0 關注
  • 285 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號