元素：transitionend 事件
當一個 CSS 過渡 完成時，會觸發 transitionend 事件。如果過渡在完成前被移除，例如 transition-property 被移除或 display 被設定為 none，則不會生成該事件。
transitionend 事件在兩個方向上都會觸發——在過渡到過渡狀態完成時，以及在完全恢復到預設或非過渡狀態時。如果沒有過渡延遲或持續時間，如果兩者都為 0 或兩者都未宣告，則沒有過渡，也不會觸發任何過渡事件。如果觸發了 transitioncancel 事件，則 transitionend 事件不會觸發。
此事件不可取消。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("transitionend", (event) => { })
ontransitionend = (event) => { }
事件型別
一個 TransitionEvent。繼承自 Event。
事件屬性
也繼承自其父級 Event 的屬性.
TransitionEvent.propertyName只讀-
一個字串，包含與過渡關聯的 CSS 屬性的名稱。
TransitionEvent.elapsedTime只讀-
一個
float，表示事件觸發時過渡已執行的時間（以秒為單位）。此值不受transition-delay屬性的影響。 TransitionEvent.pseudoElement只讀-
一個字串，以
::開頭，包含動畫執行的 偽元素 的名稱。如果過渡未在偽元素上執行，而是在元素上執行，則為空字串：''。
示例
此程式碼獲取一個定義了過渡的元素，併為 transitionend 事件新增一個監聽器。
const transition = document.querySelector(".transition");
transition.addEventListener("transitionend", () => {
console.log("Transition ended");
});
相同，但使用 ontransitionend。
const transition = document.querySelector(".transition");
transition.ontransitionend = () => {
console.log("Transition ended");
};
即時示例
在以下示例中，我們有一個簡單的 <div> 元素，其樣式包含一個帶有延遲的過渡。
<div class="transition">Hover over me</div>
<div class="message"></div>
.transition {
width: 100px;
height: 100px;
background: red;
transition-property: transform, background;
transition-duration: 2s;
transition-delay: 1s;
}
.transition:hover {
transform: rotate(90deg);
background: transparent;
}
在此基礎上，我們將新增一些 JavaScript 來指示 transitionstart、transitionrun、transitioncancel 和 transitionend 事件的觸發。在此示例中，要取消過渡，請在過渡結束前停止將滑鼠懸停在正在過渡的框上。要觸發過渡結束事件，請在過渡結束前一直將滑鼠懸停在過渡上。
const message = document.querySelector(".message");
const el = document.querySelector(".transition");
el.addEventListener("transitionrun", () => {
message.textContent = "transitionrun fired";
});
el.addEventListener("transitionstart", () => {
message.textContent = "transitionstart fired";
});
el.addEventListener("transitioncancel", () => {
message.textContent = "transitioncancel fired";
});
el.addEventListener("transitionend", () => {
message.textContent = "transitionend fired";
});
transitionend 事件在兩個方向上都會觸發：當框完成旋轉並且不透明度達到 0 或 1 時（取決於方向）。
如果沒有過渡延遲或持續時間，如果兩者都為 0 或兩者都未宣告，則沒有過渡，也不會觸發任何過渡事件。
如果觸發了 transitioncancel 事件，則 transitionend 事件不會觸發。
規範
| 規範 |
|---|
| CSS 過渡 # transitionend |
瀏覽器相容性
載入中…