元素：transitioncancel 事件

transitioncancel 事件在 CSS 过渡 被取消时触发。

语法

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

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

ontransitioncancel = (event) => {};

事件类型

一个 TransitionEvent。继承自 Event.

Event TransitionEvent

事件属性

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

TransitionEvent.propertyName 只读

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

TransitionEvent.elapsedTime 只读

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

TransitionEvent.pseudoElement 只读

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

示例

这段代码获取一个定义了过渡的元素，并在transitioncancel事件上添加一个监听器

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

transition.addEventListener("transitioncancel", () => {
  console.log("Transition canceled");
});

相同的方法，但使用ontransitioncancel属性而不是addEventListener()

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

transition.ontransitioncancel = () => {
  console.log("Transition canceled");
};

实时示例

在下面的示例中，我们有一个简单的<div>元素，它被样式设置为包含延迟的过渡

html
<div class="transition"></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: 2s;
}

.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";
});

如果在transitionrun事件发生后但在transitionend事件触发之前，过渡在任一方向上被取消，则会触发transitioncancel事件。

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

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

规范

规范
CSS 过渡
# transitioncancel
CSS 过渡
# dom-globaleventhandlers-ontransitioncancel

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见