动画只执行一次是因浏览器缓存结束状态，需强制重排：先设animation='none'，再读offsetheight触发重排，最后恢复动画；配合:key强制重渲染，并确保animation-iteration-count:1与fill-mode:forwards配对使用。
动画只点一次有效，再点没反应？关键在重置动画状态
uni-app H5 端 CSS 动画点击后只执行一次，后续点击完全没反应——这不是 bug，是浏览器对已结束动画的缓存行为。动画结束后 DOM 元素停留在最后一帧，animation 属性没变，浏览器认为“无需重播”，直接跳过渲染流程。
真正有效的解法不是改 @keyframes，而是每次触发前强制清空并重建动画上下文：
- 先设
el.style.animation = 'none' - 立即读取
el.offsetHeight（触发重排，清掉旧动画状态） - 再恢复完整
animation值，如el.style.animation = 'muyu-tick 0.1s linear'
别用 setTimeout 延迟加类——H5 下事件循环快，16ms 都可能失效；必须靠 offsetHeight 这种同步重排手段。
uni-app 里怎么安全绑定动画触发逻辑？别直接改 class
在 @tap 里直接切换 class（比如加 animation-tick）容易失败：Vue 的 diff 机制可能跳过 class 变更，或 DOM 更新未及时 flush。尤其 H5 端页面常被复用，data 没重置，class 重复添加等于没加。
推荐写法是操作 style.animation，并配合 :key 强制重渲染：
<image :key="animKey" :src="stickSrc"></image>- JS 中：
this.animKey = Math.random().toString(36).substr(2, 9)（每次点都换 key） - 同时调用上面说的
replayAnimation()函数，双保险
注意：不要用 lsktl.rndstr() 这类自定义工具函数——它若返回相同字符串（比如种子固定），key 就失效。
animation-fill-mode: forwards 为什么没用？因为 animation-iteration-count 没配对
很多人加了 animation-fill-mode: forwards 却发现动画还是“闪回”，其实是漏了配套设置：animation-iteration-count: 1 必须显式写出。否则一旦父级样式、scoped style 或其他规则覆盖了它，动画就可能变成 infinite 或 0，forwards 就失去意义。
简写时顺序也重要：animation: muyu-tick 0.1s linear 0s 1 forwards —— 最后两位分别是 iteration-count 和 fill-mode，写反了会被忽略。
另外，transform 类属性不会自动继承。如果元素原本有 scale(0.8)，而动画里只写了 rotate(40deg)，那动画结束时 scale 会变成 none，视觉上就是“缩没了”。必须在 @keyframes 的 100% 帧里把所有要保留的 transform 写全。
H5 端特别要注意：popstate + 动画重播的冲突
如果你在 H5 页面监听了 window.addEventListener('popstate')，又在 onShow 里重置状态，千万别在这里直接调用动画重播函数——onShow 触发时 DOM 可能还没 ready，offsetHeight 读出来是 0，重排失败，动画依旧不播。
稳妥做法是加一层检查：
- 用
uni.createSelectorQuery()查元素是否真实挂载 - 或在
onReady里初始化动画容器，onShow只负责触发 - 避免在
onUnload里移除 popstate 监听器的同时还操作动画 DOM——H5 页面可能已被销毁，el已为null
最易忽略的点：iOS Safari 对 offsetHeight 重排的响应比 Chrome 更敏感，有时需额外加 requestAnimationFrame 包一层才能稳定生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
