語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("transitionrun", (event) => { })
ontransitionrun = (event) => { }
事件型別
一個 TransitionEvent。繼承自 Event。
事件屬性
也繼承自其父級 Event 的屬性.
TransitionEvent.propertyName只讀-
一個字串，包含與過渡關聯的 CSS 屬性的名稱。
TransitionEvent.elapsedTime只讀-
一個
float，表示事件觸發時過渡已執行的時間（以秒為單位）。此值不受transition-delay屬性的影響。 TransitionEvent.pseudoElement只讀-
一個字串，以
::開頭，包含動畫執行的 偽元素 的名稱。如果過渡未在偽元素上執行，而是在元素上執行，則為空字串：''。
示例
此程式碼向 transitionrun 事件添加了監聽器
js
el.addEventListener("transitionrun", () => {
console.log(
"Transition is running but hasn't necessarily started transitioning yet",
);
});
與上面相同，但使用 ontransitionrun 屬性而不是 addEventListener()
js
el.ontransitionrun = () => {
console.log(
"Transition started running, and will start transitioning when the transition delay has expired",
);
};
即時示例
在以下示例中，我們有一個簡單的 <div> 元素，其樣式包含一個帶有延遲的過渡。
html
<div class="transition">Hover over me</div>
<div class="message"></div>
css
.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 事件在哪裡觸發。
js
const el = document.querySelector(".transition");
const message = document.querySelector(".message");
el.addEventListener("transitionrun", () => {
message.textContent = "transitionrun fired";
});
el.addEventListener("transitionstart", () => {
message.textContent = "transitionstart fired";
});
el.addEventListener("transitionend", () => {
message.textContent = "transitionend fired";
});
區別在於：
transitionrun在過渡建立時觸發（即，在任何延遲的開始時）。transitionstart在實際動畫開始時觸發（即，在任何延遲的結束時）。
即使在延遲到期之前取消了過渡，transitionrun 仍然會發生。如果沒有過渡延遲，或者 transition-delay 為負值，則會同時觸發 transitionrun 和 transitionstart。
規範
| 規範 |
|---|
| CSS 過渡 # transitionrun |
瀏覽器相容性
載入中…