通過 JavaScript 分配時 CSS 轉換不起作用

Question

我在嘗試通過 JavaScript 將 CSS3 轉換應用於幻燈片放映時遇到了一些重大問題。

基本上，JavaScript 獲取幻燈片中的所有幻燈片，並將 CSS 類應用於正確的元素以提供漂亮的動畫效果，如果沒有 CSS3 過渡支持，它將只應用沒有過渡的樣式。

現在，我的“小”問題。 一切都按預期工作，所有幻燈片都獲得了正確的樣式，代碼運行沒有錯誤（到目前為止）。 但是指定的過渡不起作用，即使應用了正確的樣式。 此外，當我通過檢查器自己應用樣式和過渡時，它們會起作用。

由於我自己找不到合乎邏輯的解釋，所以我認為這里有人可以回答，好嗎？

我已經把代碼現在的一個小例子放在一起： http ://g2f.nl/38rvma 或者使用 JSfiddle（無圖像）： http : //jsfiddle.net/5RgGV/1/

Answer 1

為了使transition工作，必須發生三件事。

1. 元素必須明確定義屬性，在這種情況下： opacity: 0;
2. 元素必須定義transition: opacity 2s;
3. 必須設置新屬性： opacity: 1

如果您動態分配 1 和 2，就像您在示例中一樣，則需要在 3 之前延遲，以便瀏覽器可以處理請求。 它在您調試時起作用的原因是您通過逐步執行它來創建此延遲，從而為瀏覽器提供處理時間。 延遲分配.target-fadein ：

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100); 

或者將.target-fadein-begin直接放入您的 HTML 中，以便在加載時對其進行解析並准備好進行轉換。

向元素添加transition不是觸發動畫的原因，更改屬性會。

 // Works document.getElementById('fade1').className += ' fade-in' // Doesn't work document.getElementById('fade2').className = 'fadeable' document.getElementById('fade2').className += ' fade-in' // Works document.getElementById('fade3').className = 'fadeable' window.setTimeout(function() { document.getElementById('fade3').className += ' fade-in' }, 50)

 .fadeable { opacity: 0; } .fade-in { opacity: 1; transition: opacity 2s; }

 <div id="fade1" class="fadeable">fade 1 - works</div> <div id="fade2">fade 2 - doesn't work</div> <div id="fade3">fade 3 - works</div>

Answer 2

欺騙布局引擎！

function finalizeAndCleanUp (event) {
    if (event.propertyName == 'opacity') {
        this.style.opacity = '0'
        this.removeEventListener('transitionend', finalizeAndCleanUp)
    }
}
element.style.transition = 'opacity 1s'
element.style.opacity = '0'
element.addEventListener('transitionend', finalizeAndCleanUp)
// next line's important but there's no need to store the value
element.offsetHeight
element.style.opacity = '1'

如前所述， transition通過從狀態A插入到狀態B 來工作。 如果您的腳本在同一函數中進行了更改，則布局引擎無法將狀態A結束和狀態B開始的位置分開。 除非你給它提示。

由於官方沒有給出提示的方法，所以必須依賴一些函數的副作用。 在這種情況下， .offsetHeight getter 隱式地使布局引擎停止、評估和計算所有設置的屬性，並返回一個值。 通常，為了性能影響應該避免這種情況，但在我們的情況下，這正是所需要的：狀態整合。

為完整性添加了清理代碼。

Answer 3

有人問為什么會延遲。 該標准希望允許同時發生多個轉換，稱為樣式更改事件（例如，元素在旋轉到視圖的同時淡入）。 不幸的是，它沒有定義一種明確的方式來對您希望同時發生的轉換進行分組。 相反，它讓瀏覽器可以通過調用它們之間的距離來任意選擇同時發生哪些轉換。 大多數瀏覽器似乎使用它們的刷新率來定義這個時間。

如果你想了解更多細節，這里是標准： http : //dev.w3.org/csswg/css-transitions/#starting