语法
在诸如 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 |
浏览器兼容性
加载中…