HTMLElement：transitionstart 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transitionstart 事件会在 CSS transition 实际开始的时候触发，或者说在某个 transition-delay 已经结束之后触发。

是否冒泡 是
是否可取消 否
接口 TransitionEvent
事件处理器属性 ontransitionstart

示例

下列代码对 transitionstart 事件添加了一个监听器：

js
element.addEventListener("transitionstart", () => {
  console.log("transition 开始");
});

一样的代码，但是使用 ontransitionstart 属性来替代 addEventListener()：

js
element.ontransitionstart = () => {
  console.log("transition 开始");
};

运行实例

在下面的例子中，我们有一个简单的 <div> 元素，并设置了一个包含 delay 的 transition 样式。

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

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}

对此，我们再添加一些 JavaScript 代码来指出 transitionstart 和 transitionrun 事件在哪里触发。

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

transition.addEventListener("transitionrun", function () {
  message.textContent = "transitionrun 触发了";
});

transition.addEventListener("transitionstart", function () {
  message.textContent = "transitionstart 触发了";
});

transition.addEventListener("transitionend", function () {
  message.textContent = "transitionend 触发了";
});

不同的地方是：

  • transitionrun 在 transition 创建的时候被触发。（或者说在某个 delay 开始的时候）
  • transitionstart 在动画实际开始的时候被触发。 (或者说在某个 delay 结束的时候)

规范

Specification
CSS Transitions
# transitionstart

浏览器兼容性

BCD tables only load in the browser

参见