老八：不如趕快吃掉。

圖片來源：巴哈姆特動畫瘋
官方統計《敗北女角太多了》八奈見杏菜動畫10集總共吃了「72416卡路里」。

本篇紀錄之不可思議事件為transitionrun與transitionstart事件，並示例一操術法以區分二事件之差異。

事件其廿一：transitionrun

此事件發生於元素之樣式屬性transition被創立之時。意即transitionrun事件發生於樣式屬性transition-delay開始之前。

規範原文：
The transitionrun event occurs when a transition is created.

MDN：
The transitionrun event is fired when a CSS transition is first created, i.e. before any transition-delay has begun.

事件其廿二：transitionstart

此事件發生於元素之樣式屬性transition真正開始作用之時。意即transitionstart事件發生於樣式屬性transition-delay結束之後。

規範原文：
The transitionstart event occurs when a transition’s delay phase ends.

MDN：
The transitionstart event is fired when a CSS transition has actually started, i.e., after any transition-delay has ended.

以下示例藉前篇之小七鼠應門示例之改造，觀測transitionrun與transitionstart事件，以紀錄二事件之觸發時機之不同處。

const door = document.querySelector(".door");
const seven = document.querySelector(".seven");
const text = document.querySelector(".text");

function openDoor() {
  door.style.transform = `rotateY(120deg)`;
  seven.style.transform = `scale(1)`;
}

function showText(event) {
  if (event.type === "transitionrun") {
    text.textContent = "小七鼠正前來開門";
  } else {
    text.textContent = "小七鼠來開門了！";
  }
}

door.addEventListener("dblclick", openDoor);

door.addEventListener("transitionstart", showText);
door.addEventListener("transitionrun", showText);

分段註釋如下：
選取鼠之宅門元素、小七鼠元素及文字元素。

const door = document.querySelector(".door");
const seven = document.querySelector(".seven");
const text = document.querySelector(".text");

定義二函式之術，名為openDoor及showText，內容分別為小七鼠打開鼠之宅門及顯示小七鼠目前狀態之文字。

其中函式之術showText依照不同之觸發事件，顯示不同狀態文字：若為transitionrun事件，顯示「小七鼠正前來開門」，若非transitionrun事件（則為transitionstart事件），顯示「小七鼠來開門了！」。

function openDoor() {
  door.style.transform = `rotateY(120deg)`;
  seven.style.transform = `scale(1)`;
}

function showText(event) {
  if (event.type === "transitionrun") {
    text.textContent = "小七鼠正前來開門";
  } else {
    text.textContent = "小七鼠來開門了！";
  }
}

同前篇之術式，對於鼠之宅門元素設定dblclick事件觀測器，當鼠輩進行兩次點按鼠之宅門元素，視同敲鼠之宅門，以喚醒小七鼠開門見客。

door.addEventListener("dblclick", openDoor);

另設定二觀測器，對於鼠之宅門元素觀測transitionstart與transitionrun事件，使不同事件發生時改變文字顯示。

door.addEventListener("transitionstart", showText);
door.addEventListener("transitionrun", showText);

另鼠之宅門之transition樣式設定如下，意即transform樣式於3秒後轉變，且轉變之時長為2秒：

.door {
  transition: transform 2s 3s;
}

鼠輩敲擊門後，觸發dblclick事件，使鼠之宅門元素transform樣式準備依照transition樣式設定轉變，因此發生transitionrun事件，文字顯示為「小七鼠正前來開門」；3秒過後，鼠之宅門打開，transform樣式真正開始轉變而發生transitionstart事件，文字顯示為「小七鼠來開門了！」。

示例處

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day21

翻譯

操術法：code
元素：element
鼠輩：滑鼠

相關連結

• transitionrun - w3.org
• transitionrun - MDN
• transitionstart - w3.org
• transitionstart - MDN