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 事件在哪里触发。
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 结束的时候)
规范
| 规范 |
|---|
| CSS Transitions Module Level 1 # transitionstart |
浏览器兼容性
参见
GlobalEventHandlers.ontransitionstart事件处理器TransitionEvent接口- CSS 属性：
transition,transition-delay,transition-duration,transition-property,transition-timing-function - 相关的事件：
transitionend,transitionrun,transitioncancel - 在
Documenttargets 上的此事件：transitionstart - 在
Windowtargets 上的此事件：transitionstart