Vue Marquee 结束事件监听实现方法

<p>&quot;<template>\n  <div>\n    &lt;div ref=&quot;marquee&quot; class=&quot;marquee&quot;&gt;This is a marquee</div>\n  </div>\n</template>\n\n<script>\nexport default {\n  mounted() {\n    this.$refs.marquee.addEventListener('transitionend', this.handleMarqueeEnd);\n  },\n  methods: {\n    handleMarqueeEnd() {\n      // marquee结束事件的处理逻辑\n      console.log('Marquee ended');\n    }\n  }\n}\n</script>\n\n<style>\n.marquee {\n  position: relative;\n  animation: marquee 5s linear infinite;\n}\n\n@keyframes marquee {\n  0% {\n    left: 0;\n  }\n  100% {\n    left: -100%;\n  }\n}\n</style>&quot;\n\nVue 的 marquee 结束事件可以通过监听 transitionend 事件来实现。具体步骤如下：\n\n1. 在需要监听 marquee 结束事件的元素上添加一个 ref 属性，例如 ref=&quot;marquee&quot;。\n2. 在 Vue 的 methods 中定义一个方法来处理 marquee 结束事件，例如 handleMarqueeEnd()。\n3. 在 mounted 生命周期钩子中，使用 this.$refs.marquee.addEventListener() 方法来监听 transitionend 事件，将 handleMarqueeEnd() 方法作为事件处理函数传入。\n\n在以上示例中，当 marquee 动画结束时，会在控制台中输出 &quot;Marquee ended&quot;。你可以根据需要，修改 handleMarqueeEnd() 方法中的逻辑来实现你想要的效果。</p>