記錄簿標題愈顯無理，然標題者，篇章之最難也。

圖片來源：派星機
♫如果沒梗圖就使用派星機♫

本篇紀錄與前篇相關之不可思議事件：transitionend事件。

事件其廿三：transitionend

此事件發生於元素之樣式屬性transition轉變結束之時。

規範原文：
The transitionend event occurs at the completion of the transition.

若於transition完成設定之轉變前移除元素之transition，或樣式屬性display設定為none，則不觸發transitionend事件。

規範原文：
In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

以下示例於介面顯示受力之鍵石，此鍵石之外框色彩將漸變，變色結束之時此鍵石之符文將被詭異黃色人類臉龐覆蓋隱藏。

const keys = document.querySelector(".keys");

function showPressedKeys(event) {
  const key = event.key;

  const singleKey = document.createElement("div");
  singleKey.classList.add("key-down");
  singleKey.textContent = `${key}`;
  keys.insertBefore(singleKey, null);

  setTimeout(() => {
    singleKey.classList.add("bomb");
  }, 1000);
}

window.addEventListener("keydown", showPressedKeys);

keys.addEventListener("transitionend", (event) => {
  event.target.textContent = "🤪";
});

分段註釋如下：
選取鍵石容器元素。

const keys = document.querySelector(".keys");

定義函式之術名showPressedKeys，內容為顯示受力之鍵石之符文，並設置定時裝置於1秒後裝設加熱器heater，使鍵石之外框色彩熱紅。

function showPressedKeys(event) {
  const key = event.key;

  const singleKey = document.createElement("div");
  singleKey.classList.add("key-down");
  singleKey.textContent = `${key}`;
  keys.insertBefore(singleKey, null);

  setTimeout(() => {
    singleKey.classList.add("heater");
  }, 1000);
}

對於全介面設定keydown事件觀測器，當鍵石受力後施以函式之術showPressedKeys。

window.addEventListener("keydown", showPressedKeys);

另以前篇紀錄之事件委任之方式，於鍵石容器元素設定transitionend事件觀測器，當其子元素發生transitionend事件，產生發泡現象後觸發鍵石容器元素之transitionend事件，即可以事件之target屬性，取得真正觸發事件之元素（此為鍵石元素）施以詭異黃色人類臉龐覆蓋真正之符文。

keys.addEventListener("transitionend", (event) => {
  event.target.textContent = "🤪";
});

按壓鍵石l i f e i s s h i t後，各鍵石之外框漸由紫轉紅，轉變結束時，符文即遭詭異黃色人類臉龐掩蓋。

示例處

示例之術式

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

翻譯

元素：element
鍵石：鍵盤按鍵
符文：值

相關連結

• transitionend - w3.org