元素：transitionrun 事件

transitionrun 事件在首次创建 CSS 过渡 时触发，即在任何 transition-delay 开始之前。

此事件不可取消。

语法

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

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

ontransitionrun = (event) => {};

事件类型

一个 TransitionEvent。继承自 Event。

Event TransitionEvent

事件属性

还继承其父类 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: 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 事件触发的位置。

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 也会发生。如果不存在过渡延迟或过渡延迟为负数，则 transitionrun 和 transitionstart 都会触发。

规范

规范
CSS 过渡
# transitionrun

浏览器兼容性

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

另请参阅