元素：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 |
浏览器兼容性
加载中…