關於二元屬性（例如可見性）的CSS轉換

Question

當在可見度hidden和visible之間轉換時，我發現了一個奇怪的行爲。看起來好像去了visible，它在轉換時間開始時立即變爲visible。但是回到hidden，它會等到轉換持續時間完成後纔會消失。

這是什麼原因？這是我可以依賴的東西，還是我應該明確設置其轉換延遲？

Answer 1

這樣做的原因是因爲這是過渡的visible財產的建議的實施：

從the W3 for CSS Transitions：

可視性：如果一個值是「看得見」，插值爲離散步驟，其中0和1之間的定時函數的值映射到定時函數的「可見」和其他值（其僅出現在轉換的開始/結束處或者作爲'Y-Bezier（）'函數的結果[0,1]之外的值）映射到更近的端點;如果兩個值都不可見，則不可插入。

基本上，visible用於轉換百分比不是0.00（或1.00）時。所以，如果轉換百分比是10％（0.1），那麼它是可見的。這就是爲什麼它立即變得可見。其他值在轉換完成之前不會被識別，因爲在轉換過程中使用了可見性。

根據您的使用情況，您可以使用transition-delay，你可以使用一個關鍵幀animation，你可以轉換的opacity財產，或者你可以嘗試使用cubic-bezier功能。