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
参见
GlobalEventHandlers.ontransitionstart
事件处理器TransitionEvent
接口- CSS 属性:
transition
,transition-delay
,transition-duration
,transition-property
,transition-timing-function
- 相关的事件:
transitionend
,transitionrun
(en-US),transitioncancel
(en-US) - 在
Document
targets 上的此事件:transitionstart
(en-US) - 在
Window
targets 上的此事件:transitionstart
(en-US)