Animate.css在滾動bug鉻/火狐

我使用Animate.css滾動時在元素上植入動畫。我的元素的類別爲.fadeInRight，並且是hidden。當他們出現在滾動，我添加類可見誰指Animate.css在滾動bug鉻/火狐

{visibility:visible;}.

我看到在Safari上的動畫漸變，但在Chrome的Firefox中的元素纔出現，不褪色，任何想法？

{編輯} 沒錯這裏是元素HTML

<section class="Informations tadam fadeInLeft"> 
Some text 
</section>

我的JS

$(window).scroll(function() { 
       $('.tadam').each(function(){ 
       var imagePos = $(this).offset().top; 
       var topOfWindow = $(window).scrollTop(); 
        if (imagePos < topOfWindow+(window.innerHeight * 0.9)) { 
         $(this).addClass("animated visible"); 
        } 
       }); 
      });

而我的這兩個類

.tadam{visibility:hidden;} 
.visible{visibility: visible;}

感謝您的幫助

CSS

來源

2014-05-16 Alex

你能提供一些HTML嗎？或鏈接到頁面，看看它是怎麼樣的..我無法重現它，因爲它在鉻合作 – mohamedrias

您好，我編輯我的文章！謝謝 – Alex

幾天前開始發生在我身上，無法想象它。你有沒有解決你的問題？ Chrome/Firefox（linux）無法正常工作，但在所有其他平臺上運行平穩（除了Vivaldi，它甚至不會彈出） – petsoukos

這可能是因爲您從「隱藏」過渡到「可見」，此屬性不具動畫性。

如果您的元素visibility始終可見（或默認），並且您使用從opacity:0到opacity:1的轉換，它將起作用。

所以你的CSS應該是這樣的：

.tadam{opacity: 0;} 
.visible{opacity: 1;}

如果你絕對需要使用的知名度，你應該設定一個超時的可見類和動畫類之間是這樣的：

var $this = $(this).addClass("visible"); 
setTimeout(function(){ 
    $this.addClass("animated"); 
},10); // 10 should be enough, if it doesn't work, add a little more

（比從未猜到的更晚）

來源

2016-01-06 09:19:10

Animate.css在滾動bug鉻/火狐

回答

相關問題