从 Vue 2 迁移到 Vue 3 后，SVG 动画 endEvent 未触发答案

【问题标题】：SVG animation endEvent not firing after migrating from Vue 2 to Vue 3从 Vue 2 迁移到 Vue 3 后，SVG 动画 endEvent 未触发
【发布时间】：2021-06-20 15:32:43
【问题描述】：

我目前正在将一个 vue 2 / Quasar 1 项目迁移到 vue 3 / Quasar 2，并且我正在努力处理一个 SVG 动画元素上的事件，该事件似乎在新版本中没有触发....

<animateTransform
    begin="startAnimation.begin"
    attributeName="transform"
    attributeType="XML"
    type="rotate"
    from="-18 150 380"
    to="0 150 380"
    dur="0.6s"
    repeatCount="1"
    fill="freeze"
    calcMode="spline"
    keySplines="0.3 0.7 0.3 0.7"
    keyTimes="0;1"
    @endEvent="animationEndHandler()"
/>

endEvent 事件 (https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement/endEvent_event) 在旧版本中运行良好，但在新版本中没有任何反应。其他一切都是一样的，我尝试将 animationEndHandler 方法简化为一个 console.log('hello')

我已经在 Mac 上的 Chrome 和 Safari 中进行了尝试，并在 iOS 上使用 Cordova 进行构建，所以我相信这不是浏览器问题，因为旧版本可以在相同的浏览器中运行。

只是因为我没有其他东西可以尝试，所以我也尝试了以下所有...

@endEvent="animationEndHandler"
@endevent="animationEndHandler"
@end-event="animationEndHandler"
@endevent="animationEndHandler()"
@end-event="animationEndHandler()"
v-on:endEvent="animationEndHandler()"
v-on:endEvent="animationEndHandler"
v-on:endevent="animationEndHandler()"
v-on:endevent="animationEndHandler"
v-on:end-event="animationEndHandler()"
v-on:end-event="animationEndHandler"

当我在 chrome 开发工具中检查 <animateTransform> 元素并查看右侧的事件侦听器选项卡时，我可以在其中看到“endevent”，并且在处理程序中引用了我的 animationEndHandler，但它似乎从来没有被调用。

如果有人可以就为什么这不再适用于 Vue 3 提供任何建议，我将不胜感激！

【问题讨论】：

标签： javascript vue.js svg quasar-framework svg-animate

【解决方案1】：

原因我不清楚（可能是 Vue 3 错误），但您可以通过声明自己的模仿 v-on 的 custom directive（@ 是简写）来解决它。

例如在本地注册一个指令，命名为on2：

export default {
  directives: {
    on2(el, binding) {
      // <div v-on2:foo="bar">  ->  binding = { arg: 'foo', value: this.bar }
      el.addEventListener(binding.arg, binding.value);
    },
  },
}

或者全局注册指令：

createApp(...)
  .directive('on2', (el, binding) => {
    el.addEventListener(binding.arg, binding.value);
  })
  .mount('#app')

并在您的模板中使用它：

<animateTransform v-on2:endEvent="animationEndHandler" />

Vue 3 demo

【讨论】：

【解决方案2】：

试试:endEvent="animationEndHandler()"

遇到同样的问题，我想我知道为什么。 SVG 元素不使用标准的addEventListener 方法，而是使用设置的属性。您可以使用标准属性设置器进行设置。

这是一个演示：https://jsfiddle.net/L5om97dr/1/

【讨论】：