元素：transitionend 事件

transitionend 事件在 CSS 过渡 完成时触发。如果在过渡完成之前移除过渡，例如移除 transition-property 或将 display 设置为 none，则不会生成该事件。

transitionend 事件在两个方向上触发 - 当它完成过渡到过渡状态时，以及当它完全恢复到默认状态或非过渡状态时。如果没有过渡延迟或持续时间，如果两者都为 0s 或两者都没有声明，则没有过渡，并且不会触发任何过渡事件。如果触发了 transitioncancel 事件，则不会触发 transitionend 事件。

此事件不可取消。

语法

在诸如 addEventListener() 的方法中使用事件名称，或者设置事件处理程序属性。

js
addEventListener("transitionend", (event) => {});

ontransitionend = (event) => {};

事件类型

一个 TransitionEvent。继承自 Event。

Event TransitionEvent

事件属性

还继承了其父级 Event 的属性.

TransitionEvent.propertyName 只读

包含与过渡相关的 CSS 属性名称的字符串。

TransitionEvent.elapsedTime 只读

当此事件触发时，float 类型，表示过渡运行的时间（以秒为单位）。此值不受transition-delay 属性的影响。

TransitionEvent.pseudoElement 只读

一个以::开头的字符串，包含动画运行的伪元素名称。如果过渡不是在伪元素上运行，而是在元素上运行，则为空字符串：''。

示例

此代码获取一个定义了过渡的元素，并为transitionend 事件添加一个监听器。

js
const transition = document.querySelector(".transition");

transition.addEventListener("transitionend", () => {
  console.log("Transition ended");
});

相同，但使用ontransitionend。

js
const transition = document.querySelector(".transition");

transition.ontransitionend = () => {
  console.log("Transition ended");
};

实时示例

在以下示例中，我们有一个简单的<div> 元素，它使用过渡进行样式设置，包括延迟。

html
<div class="transition">Hover over me</div>
<div class="message"></div>
css
.transition {
  width: 100px;
  height: 100px;
  background: rgb(255 0 0 / 100%);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgb(255 0 0 / 0%);
}

我们将添加一些 JavaScript 代码来指示transitionstart、transitionrun、transitioncancel 和 transitionend 事件触发。在本例中，要取消过渡，请在过渡结束之前停止将鼠标悬停在过渡的方框上。为了触发过渡结束事件，请将鼠标悬停在过渡上，直到过渡结束。

js
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 时，具体取决于方向。

如果没有过渡延迟或持续时间，如果两者都是 0s 或都没有声明，则没有过渡，并且不会触发任何过渡事件。

如果触发了transitioncancel 事件，则不会触发transitionend 事件。

规范

规范
CSS 过渡
# transitionend

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅