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