HTMLElement: transitionstart 事件

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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 代码来指出 transitionstarttransitionrun (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
Unknown specification
# transitionstart

浏览器兼容性

BCD tables only load in the browser

参见