CSS transition 觸發事件

當元素套用 transition 樣式並進行轉場動作時，會觸發 transitionrun、transitionstart、transitioncancel 和 transitionend 等相關事件 ( event )，這些事件可以透過 JavaScript 接收並進行對應的動作，這篇教學會介紹這些 transition 的觸發事件。

快速導覽：

• transition 觸發的事件
• 使用 JavaScript 讀取 transition 觸發事件

transition 觸發的事件

元素套用 transition 樣式並進行轉場動作時，雖然無法中途暫停，但整個過程仍然會觸發下列四種事件：

如果要實踐 transition 暫停在某個狀態的效果，需要改用 animation 動畫的做法。

使用 JavaScript 讀取 transition 觸發事件

透過 transition 觸發的事件無法在 CSS 裡操作，必須透過 JavaScript 才能讀取，下方範例會使用具有 delay 屬性值的轉場樣式，展示用 JavaScript 讀取四種觸發事件的效果，當轉場啟動時會出現「run」，轉場動作開始時會出現「start」，若正在「run」的狀態被取消 ( 滑鼠移動開 ) 就會出現「cancel」，當整個轉場結束時會出現「end」。

線上展示：https://codepen.io/oxxo/pen/rNXROez

<!-- HTML 程式碼-->
<h2>滑鼠移動到我上方看效果</h2>
<h3>目前狀態：<span></span></h3>
<div>oxxo</div>

<!-- CSS 程式碼 -->
<style>
  h2 {border: 2px solid #000;}
  h2:hover~div {
    width: 200px;
    height: 200px;
    font-size: 80px;
    border-width: 10px;
  }
  div {
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    transition-duration: 2s;
    transition-delay: 1s;
  }
</style>

<!-- JS 程式碼 -->
<script>
  const msg = document.querySelector('span');
  const d = document.querySelector('div');

  d.addEventListener("transitionrun", () => {
    msg.innerHTML = "run";
  });
  d.addEventListener("transitionstart", () => {
    msg.innerHTML = "start";
  });
  d.addEventListener("transitioncancel", () => {
    d.innerHTML = "cancel";
  });
  d.addEventListener("transitionend", () => {
    msg.innerHTML = "end";
    d.innerHTML = "oxxo";
  });
</script>

小結

在實際的網站運用中，透過 JavaScript 讀取並操作 transition 事件的狀況其實並不常見，但如果有相關的需求，就可以善用這些轉場時觸發的事件。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～