Element：transitionrun 事件

addEventListener("transitionrun", (event) => { })

ontransitionrun = (event) => { }

el.addEventListener("transitionrun", () => {
  console.log("过渡正在运行，但不一定已经开始实际过渡");
});

el.ontransitionrun = () => {
  console.log("过渡已开始运行，并将在过渡延迟结束后开始实际过渡");
};

<div class="transition">将鼠标悬停在我上方</div>
<div class="message"></div>

.transition {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: transparent;
}

const el = document.querySelector(".transition");
const message = document.querySelector(".message");

el.addEventListener("transitionrun", () => {
  message.textContent = "transitionrun 已触发";
});

el.addEventListener("transitionstart", () => {
  message.textContent = "transitionstart 已触发";
});

el.addEventListener("transitionend", () => {
  message.textContent = "transitionend 已触发";
});