為什麼 CSS 過渡不能與可見性一起使用？

CSS 過渡和可見性：屬性難題

使用CSS 過渡時，您可能會遇到某些屬性似乎過渡平滑的情況，而其他一些問題，例如可見性，則被證明是有問題的。為了理解這種行為，讓我們深入研究轉換的本質。

轉換依賴於兩個不同值之間的轉換。具有數值（例如不透明度）的屬性允許計算關鍵影格和值之間的內插。但是，諸如可見性之類的屬性在二進位設定（可見/隱藏）上運行。

在可見性的情況下，瀏覽器將過渡持續時間解釋為懸停時的延遲。這不是一個錯誤，而是無法在隱藏狀態和可見狀態之間進行插值的結果。延遲過渡效果出現是因為瀏覽器會等到持續時間結束才突然切換可見性狀態。

相反，不透明度過渡按預期工作，因為屬性的數值允許平滑插值。不透明度值逐漸從 0 過渡到 1，從而創建平滑的淡入淡出效果。

要對可見性屬性進行動畫處理，請考慮使用不透明度或其他可轉換的測量屬性（例如高度、寬度）作為可見性的代理。例如，您可以在高度上使用過渡，並將高度設為 0（表示「隱藏」狀態）和非零值（表示「可見」狀態）。

以上是為什麼 CSS 過渡不能與可見性一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！