HTMLElement: transitionstart 事件

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

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

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

示例

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

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

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

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

运行实例

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

<div class="transition">Hover over me</div>
<div class="message"></div>

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

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

参见