為什麼 CSS 轉場無法與 Visibility 屬性配合使用？

CSS 轉換與可見性：一種欺騙性的錯覺

在CSS 中，轉換允許在屬性狀態之間實現平滑的動畫。然而，在嘗試轉換可見性時出現了一個令人費解的問題，讓用戶感到困惑並想知道這是否是一個錯誤。

可見性轉換的案例

考慮以下程式碼：

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>

此程式碼旨在將滑鼠懸停在ID 為「outer」的元素上時顯示ID 為「inner」的元素。然而，令我們沮喪的是，過渡未能如預期進行。可見性不是平滑過渡，而是在延遲後突然切換，這與指定的過渡持續時間相符。

罪魁禍首

根本原因在於可見性的本質財產。與表示連續值 (0-1) 的不透明度等屬性不同，可見度以二元狀態存在（可見或隱藏）。這種根本差異阻礙了轉換，因為沒有中間狀態可以插值。

可轉換屬性

轉換依賴於計算兩個數值之間的關鍵影格。在不透明度的情況下，過渡在 0 和 1 之間平滑淡出。但是，在可見性下，過渡缺乏插值所需的數值範圍。

結論

而這種行為最初類似於 bug，但它是 CSS 轉換的固有限制。只有具有可計算值的屬性才能平滑地進行動畫處理。對於像可見性這樣的二元屬性，突然的狀態變化是不可避免的。

以上是為什麼 CSS 轉場無法與 Visibility 屬性配合使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！