當初始狀態和最終狀態相同時，不會觸發 transitionend

Question

在下面的示例中，我正在使用 CSS 進行background-color轉換，並嘗試處理兩個 div 的transitionend事件。

不幸的是，由於初始和最終背景顏色相同，因此不會為div2觸發transitionend ：

 var div1 = $('#div1'); var div2 = $('#div2'); $('#toggle').on('click', function() { div1.toggleClass('toggled'); div2.toggleClass('toggled'); }) div1.on('transitionend', function() { console.log('div1 transitionend') }) div2.on('transitionend', function() { console.log('div2 transitionend') })

 div { width: 100px; height: 100px; transition: background-color .5s; } #div1 { background-color: red; } #div2 { background-color: green; } .toggled { background-color: green !important; }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <div id="div1"></div> <div id="div2"></div> <button id="toggle">Toggle animation</button>

即使在初始狀態和最終狀態相同的情況下，我如何實現處理transitionend結束？

Answer 1

當發生樣式更改事件時，通常會發生轉換。 也就是說，當元素的樣式（屬性或更多的值）發生變化時，過渡就開始了。 W3C 規范（如預期的那樣）沒有定義何時觸發樣式更改事件並將其留給實現。

以下是一個我能在找到W3C規范這個特定主題（以下錨^第二段）：

當樣式更改事件發生時，實現必須根據在該事件中更改的計算值開始轉換。

實際上，以下似乎是關於何時開始過渡的更具決定性的定義。 這是在此錨點指向的部分的末尾找到的：

如果以下所有情況都為真：

• 該元素沒有該屬性的運行過渡，
• 更改前樣式與該屬性的更改后樣式不同，並且可以插入，
• 元素沒有屬性的完成轉換或完成轉換的結束值與屬性的更改后樣式不同，
• 有一個匹配的 transition-property 值，並且
• 合並的持續時間大於 0 秒，

那么實現必須從已完成的轉換集中刪除已完成的轉換（如果存在）並開始一個轉換，其：

• 開始時間是樣式更改事件的時間加上匹配的轉換延遲，
• 結束時間是開始時間加上匹配的過渡持續時間，
• 起始值是更改前樣式中過渡屬性的值，
• 結束值是更改后樣式中過渡屬性的值，
• 反向調整起始值與起始值相同，反向縮短系數為1。

---

現在，根據我對 UA 如何工作以及如何優化它們的理解，當元素上設置的任何屬性都沒有發生更改時，我看不出它們有任何理由觸發轉換開始事件。 這對 UA 來說是一種矯枉過正和額外的負擔，而這很容易避免。 當沒有過渡開始事件本身時，在這種情況下幾乎不可能觸發過渡結束事件。

因此，看起來您很可能必須使用一些虛擬屬性更改（或）使用其值等於transition-duration + transition-delay的計時器來模擬transitionend 。