语法
在诸如 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("transitionrun", (event) => { })
ontransitionrun = (event) => { }
事件类型
TransitionEvent。继承自 Event。
示例
以下代码为 transitionrun 事件添加监听器：
js
el.addEventListener("transitionrun", () => {
console.log("过渡正在运行，但不一定已经开始实际过渡");
});
同样的效果，但使用 ontransitionrun 属性而非 addEventListener()：
js
el.ontransitionrun = () => {
console.log("过渡已开始运行，并将在过渡延迟结束后开始实际过渡");
};
运行实例
在下面的示例中，我们有一个简单的 <div> 元素，并为其设置了包含延迟的过渡样式：
html
<div class="transition">将鼠标悬停在我上方</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 已触发";
});
el.addEventListener("transitionstart", () => {
message.textContent = "transitionstart 已触发";
});
el.addEventListener("transitionend", () => {
message.textContent = "transitionend 已触发";
});
二者的区别在于：
transitionrun在过渡创建时触发（即在任意延迟开始时）。transitionstart在实际动画开始时触发（即在任意延迟结束时）。
即使过渡在延迟到期前被取消，仍会触发 transitionrun。若没有过渡延迟，或 transition-delay 为负值，则会同时触发 transitionrun 和 transitionstart。
规范
| 规范 |
|---|
| CSS Transitions Module Level 1 # transitionrun |