H5端CSS动画执行一次后无法重放，本质是浏览器未重置动画状态；可靠方案是JS强制重置class、换animation-name或用transform+transition替代@keyframes。
H5端移动端CSS动画执行一次后无法重放，本质是浏览器没重置动画状态，不是uni-app特有问题，而是CSS动画机制本身决定的。
为什么:hover或JS触发的动画在iOS/Android Safari里只动一次
移动端 Safari（尤其 iOS）对 CSS 动画有更强的缓存优化：一旦某个元素完成过 animation，再次触发相同动画类名时，浏览器可能跳过重绘流程，直接复用上一次结果。这不是 bug，是渲染引擎的性能策略。
- 常见现象：
.like-btn.active加了animation: bounce 0.4s，第一次点击生效，再点就“不动了” - 根本原因：动画结束后 DOM 的
animation-name没变，浏览器认为“无需重播” - uni-app 的
v-if/v-show切换不解决这个问题——只要 class 名没变，动画上下文就被复用
可靠重置动画的三种实操方式（全平台兼容）
别依赖 animation-iteration-count: infinite，那只是让动画一直循环，不是“每次点击都重新播一次”。要的是可重复、可控制、可中断的单次播放。
- 用 JS 强制重置 class：先移除动画类，
nextTick或setTimeout(..., 0)后再加回去
示例：triggerAnimation() {<br> this.$nextTick(() => {<br> this.isAnimating = false;<br> this.$nextTick(() => {<br> this.isAnimating = true;<br> });<br> });<br>}配合模板：<view :class="{ 'animate-bounce': isAnimating }"> - 换 animation-name：给每次触发分配唯一动画名（如
bounce-1、bounce-2），避免浏览器识别为“同一动画”
注意：需提前在 CSS 中定义所有变体，或动态插入 style 标签 - 利用
transform+transition替代@keyframes：更适合点赞、缩放等简单反馈
示例：.btn {<br> transform: scale(1);<br> transition: transform 0.3s ease;<br>}<br>.btn.active {<br> transform: scale(1.1);<br>}每次 toggleactive类都会触发新过渡，天然可重放
uni-app里容易被忽略的坑
很多开发者卡在“明明写了 animation-fill-mode: forwards 却还是回弹”，其实问题不在这里。
立即学习“前端免费学习笔记（深入）”；
- 别在
v-if元素上直接写动画：H5 端 DOM 销毁重建后，动画状态丢失，但 class 还在，导致“看起来没动” - 小程序和 H5 对
animation简写的兼容性不同：H5 支持animation: name 0.3s，小程序要求显式写出animation-duration和animation-timing-function - uni-app 的
onShow不等于页面重载：用户从后台切回来时，onShow触发，但 DOM 已存在，旧动画状态仍残留，必须手动清理
真正能稳定跨端重放的，永远是可控的 class 切换 + transform + transition 组合；@keyframes 只适合固定节奏、不依赖交互时机的场景。动画是否“重置”，关键不在 CSS 写得多漂亮，而在 JS 是否真正切断了上一次的渲染上下文。
