HTMLElement：transitionstart 事件

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 (en-US) 事件在哪里触发。

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

参见