转场触发事件

当元素套用 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 事件的状况其实并不常见，但如果有相关的需求，就可以善用这些转场时触发的事件。

意见反馈