语法
在诸如 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("transitionstart", (event) => { })
ontransitionstart = (event) => { }
事件类型
TransitionEvent。继承自 Event。
示例
以下代码为 transitionstart 事件添加监听器：
js
element.addEventListener("transitionstart", () => {
console.log("过渡已开始");
});
同样的效果，但使用 ontransitionstart 属性而非 addEventListener()：
js
element.ontransitionstart = () => {
console.log("过渡已开始");
};
运行实例
在下面的示例中，我们有一个简单的 <div> 元素，并为其设置了包含延迟的过渡样式：
html
<div class="transition">将鼠标悬停在我上方</div>
<div class="message"></div>
css
.transition {
width: 100px;
height: 100px;
background: red;
transition-property: transform, background;
transition-duration: 2s;
transition-delay: 1s;
}
.transition:hover {
transform: rotate(90deg);
background: transparent;
}
对此，我们再添加一些 JavaScript，以标明 transitionstart 和 transitionrun 事件在何处触发。
js
const transition = document.querySelector(".transition");
const message = document.querySelector(".message");
transition.addEventListener("transitionrun", () => {
message.textContent = "transitionrun 已触发";
});
transition.addEventListener("transitionstart", () => {
message.textContent = "transitionstart 已触发";
});
transition.addEventListener("transitionend", () => {
message.textContent = "transitionend 已触发";
});
二者的区别在于：
transitionrun在过渡创建时触发（即在任意延迟开始时）。transitionstart在实际动画开始时触发（即在任意延迟结束时）。
规范
| 规范 |
|---|
| CSS Transitions Module Level 1 # transitionstart |