Vue - 实现动态且 “可重复“ 开启与关闭动画，由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画（类似常见的点赞动画效果可以一直重复触发动画）详细示例源代码教程

前言

如果您是 uniapp 项目，请访问 这篇文章。

本文实现了 Vue.js / Nuxt.js，在函数内用 JS 让一个元素(DOM)，“重复执行” 写好的 CSS 动画，类似点赞动画一样，

你可以直接复制示例源码，稍微改改（写上你想要的动画，换个元素就行）就能应用到您的项目中去，

---

如下图所示，当点击按钮时，元素 DOM 触发动画，动态并重复执行 “预设” 好的 CSS 动画，

无论你多么疯狂点击按钮，动画始终都会完美执行不会乱掉。

示例代码干净整洁，注释详细，无任何乱七八糟的代码！

示例源码

以下便是上方效果图的全部代码，推荐使用平台提供的一键复制避免漏选。

随便找个干净的新页面，复制运行起来。

<template