什麼時候CSS轉換被觸發？

我想淡入一頁。它應該儘快淡入，即不要等待圖像加載。什麼時候CSS轉換被觸發？

我有

<div class="content"> 
    text, images 
</div>

我有CSS像

.content{ 
    opacity:0; 
    transition: opacity 0.3s ease-in-out; 
}

，略高於</body>一個html頁面我有

$(document).ready(function() { 
    $(".content").css("opacity",1); 
});

但感覺像很長一段時間加載如果一個頁面有很多圖像。我認爲這是應該儘快將DOM寫入瀏覽器？

我嘗試刪除文檔準備，但它是一樣的。所以我想知道，什麼時候CSS轉換被觸發？它晚於文檔準備好嗎？

我要去的效果是頁面褪色。

2014-01-16 ed209

您是否在執行jQuery的正文的末尾嘗試了腳本？ – Seano666

這是一個很好的問題！這將需要一些測試..非常好奇，看到這個答案和答案！ – MElliott

這是一個相關的問題http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load可能有助於回答。 – archie

如何使用動畫功能，而不是像這樣的CSS？

$(document).ready(function() { 
    $(".content").delay(1).animate({opacity:1}); 
});

2014-01-16 04:44:16

根據this過渡開始時有些style changed event叫（我看到它是一個瀏覽器特定的東西）。問題是，我們不能肯定它是DOM之前稱爲滿載：

因爲當樣式變化事件發生此規範沒有定義，因此什麼樣的變化來計算的值被認爲是同時，作者應該知道，在做出可能轉換的更改之後的一小段時間內更改任何轉換屬性可能會導致在實現之間變化的行爲，因爲這些更改可能會在某些實現中被認爲是同時發生的，但其他實現不會發生。

我不認爲這個事件會在DOM加載之前提出。

對此，我認爲如果在DOM加載之前需要轉換，那麼最好使用jQuery來將您的元素設置爲C-link suggested。如果可以在使用此問題後啓動轉換：Using CSS for fade-in effect on page load

2014-01-16 05:25:00 Tony

回答