Element：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("过渡结束");
});

使用 ontransitionend 也是一样的：

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

transition.ontransitionend = () => {
  console.log("过渡结束");
};

实时示例

在下面的示例中，我们有一个简单的 <div> 元素，它通过过渡样式进行了修饰，其中包括一个延迟：

<div class="transition">让鼠标在这里悬停</div>
<div class="message"></div>

.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 事件的触发。在此示例中，如果要取消过渡，则需在过渡结束前不要将鼠标悬停在正在过渡的框上。为了触发过渡结束事件，需要在过渡结束时保持悬停在过渡上。

const message = document.querySelector(".message");
const el = document.querySelector(".transition");

el.addEventListener("transitionrun", () => {
  message.textContent = "触发 transitionrun";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "触发 transitionstart";
});

el.addEventListener("transitioncancel", () => {
  message.textContent = "触发 transitioncancel";
});

el.addEventListener("transitionend", () => {
  message.textContent = "触发 transitionend";
});

transitionend 事件会在两个方向上触发：当方框结束旋转并且不透明度达到 0 或 1 时（具体取决于方向）。

如果没有过渡延迟或持续时间，即如果两者都为 0 或未声明，则不会发生过渡，也不会触发任何过渡事件。

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

规范

浏览器兼容性

参见

• TransitionEvent 接口
• CSS 属性：transition、transition-delay、transition-duration、transition-property、transition-timing-function
• 相关事件：transitionrun、transitionstart、transitioncancel
• 以 Document 为目标的该事件：transitionend
• 以 Window 为目标的该事件：transitionend