為什麼 CSS 可見性轉換不像不透明度那樣運作？

過渡效果對CSS 可見性的影響

問題介紹

過渡效果在CSS 中常用來創造流暢的動畫。但是，在某些屬性（例如可見性）上進行轉換時會出現問題。在這種情況下，過渡似乎沒有按預期工作，並且行為與不透明度等其他屬性不同。

可見性與不透明度的過渡

在提供的範例中，過渡應用於元素的可見性和不透明度：

對於可見性：

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

對於不透明度：

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

過渡效果對於不透明度按預期工作，但無法觸發可見性。儘管設定了 1000 毫秒的過渡持續時間，但沒有觀察到任何動畫。

說明

觀察到的行為不是錯誤，而是過渡效果實現方式的結果CSS。轉換透過計算兩個值之間的關鍵影格並對中間狀態進行動畫處理來運作。但是，可見性是一個二進位值（可見或隱藏），不允許這些狀態之間存在數值。

因此，過渡持續時間被解釋為可見性屬性從隱藏切換之前的延遲懸停時可見（反之亦然）。這種延遲模仿了過渡的效果，但它不是與不透明度過渡相同意義上的真正動畫。

Transitionable Properties

為了確保平滑的動畫，過渡應該應用於序數屬性，這些屬性具有明確的開始值和結束值以及數值。可在此連結中找到可轉換屬性的清單：

[可轉換屬性參考的連結]

以上是為什麼 CSS 可見性轉換不像不透明度那樣運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！