為什麼 CSS 過渡不能與響應式圖像滑塊一起使用？

在CSS 變更期間強制瀏覽器重排

在建立依賴CSS3 轉換的非jQuery 回應式影像滑桿時，您可能會遇到以下問題： CSS 屬性的變更不會觸發動畫。這是由於瀏覽器優化所致，它簡化了屬性變更並跳過動畫。

要解決此問題，需要強制瀏覽器重排。重排是瀏覽器重新計算元素佈局並重新定位它以響應樣式變更的過程。

在您的程式碼片段中，您在製作初始 CSS 之前將過渡屬性設為「none 0s Linear」更改，然後將其切換回「全部 0.2 秒緩出」。然而，這種方法不會觸發回流，因此不會發生動畫。

解決方案在於在更改 CSS 後明確要求元素的 offsetHeight。此操作會啟動重排並強制瀏覽器確認並套用修改後的樣式。

實現此目的的程式碼是：

function reflow(elt){
    console.log(elt.offsetHeight);
}

其中「elt」是您建立的元素樣式變更為。更改 CSS 後呼叫「reflow(elt)」將觸發所需的動畫。

以上是為什麼 CSS 過渡不能與響應式圖像滑塊一起使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！