Svelte的on:transitionend是否兼容MSTransitionEnd等跨浏览器过渡结束事件？

你的Svelte代码on:transitionend="{stopAnim}"和那段jQuery代码在现代浏览器里效果一致，但不完全等价，具体说明如下：

• 那段jQuery代码里的MSTransitionEnd、webkitTransitionEnd、oTransitionEnd都是旧版浏览器的前缀事件：

  • MSTransitionEnd对应IE10及更早版本
  • webkitTransitionEnd对应Chrome 35以前、Safari 9以前的旧版本
  • oTransitionEnd对应Opera 12及更早的旧版本
    这些写法都是为了兼容过去浏览器尚未支持标准transitionend事件的场景。

• Svelte的on:transitionend直接绑定标准的transitionend事件，如今主流浏览器（Chrome、Firefox、Safari、Edge等）都已原生支持标准事件，不再需要这些前缀。

• 如果你的项目不需要兼容那些市场占比极低的老旧浏览器，Svelte的写法完全够用，没必要额外处理前缀事件。

• 要是必须兼容这些旧浏览器，你得手动给元素添加前缀事件的监听，示例代码如下：

  <script>
    function stopAnim() {
      // 这里写你的过渡结束逻辑
    }
  
    // 定义所有需要监听的过渡事件
    const transitionEvents = ['transitionend', 'MSTransitionEnd', 'webkitTransitionEnd', 'oTransitionEnd'];
  
    // 挂载时添加所有事件监听
    function addTransitionListeners(element) {
      transitionEvents.forEach(evt => element.addEventListener(evt, stopAnim));
    }
  
    // 销毁时移除监听，避免内存泄漏
    function removeTransitionListeners(element) {
      transitionEvents.forEach(evt => element.removeEventListener(evt, stopAnim));
    }
  </script>
  
  <!-- 使用use指令添加监听，destroy时移除 -->
  <div use:addTransitionListeners on:destroy={() => removeTransitionListeners($event.target)}>
    <!-- 你的元素内容 -->
  </div>
  

总结：现代环境下两者效果相同；如果要兼容极旧浏览器，Svelte的默认写法需要补充前缀事件的监听。

内容的提问来源于stack exchange，提问作者Eli O.