uni-app 中唯一跨端可用的动画方案是 CSS 动画，因 uni.createAnimation 仅支持小程序平台，在 H5 和 App 的 vue 页面中不可用；需用 transform + transition 控制，避免 v-if、简写 transition，并注意节点时机。
animation API 在 uni-app 里根本不能直接用
uni-app 的 animation API（即 uni.createAnimation）不是标准 Web Animation，它只在微信小程序、支付宝小程序等平台有效，在 H5 和 App 端会被忽略或报错。你写完发现动画没反应，大概率是因为当前运行环境不支持。
常见错误现象：uni.createAnimation is not a function（H5）、动画在 App 端完全静止、H5 上样式闪一下就回弹。
- 微信小程序：支持完整 API，包括
step()、export()、多属性链式调用 - H5：只能靠 CSS 动画 +
transition或@keyframes模拟，uni.createAnimation返回空对象 - App（iOS/Android）：nvue 页面可用原生动画，但普通 vue 页面同 H5，不支持该 API
uni-app 里真正跨端可用的动画方案只有 CSS
别纠结 API 是否“高级”，能跑通三端才是关键。CSS 动画是目前唯一稳定覆盖 H5、小程序、App（vue 页面）的方式，核心是控制 transition 触发和 transform 属性变更。
使用场景：按钮点击反馈、列表项滑入、抽屉展开、Tab 切换过渡。
- 必须用
transform（如translateX、scale）而非left/top，否则 H5 性能差，小程序可能卡顿 - 避免在
v-if元素上直接加 transition —— 小程序里 DOM 销毁重建会导致动画丢失，改用v-show+ class 控制显隐 - 小程序中
transition不支持简写（如transition: all .3s），需明确写出属性：transition: transform .3s, opacity .3s
示例（点击缩放按钮）：
<view class="btn" :class="{ 'btn--active': isActive }" @click="toggle">点我</view>
<style>
.btn {
transform: scale(1);
transition: transform .2s ease;
}
.btn--active {
transform: scale(0.95);
}
</style>
想用 JS 控制动画节奏？用 requestAnimationFrame + style 操作
当 CSS transition 不够用（比如需要逐帧控制、物理动效、拖拽跟随），就得手动操作 style.transform，配合 requestAnimationFrame 实现平滑更新。
这不是“替代 animation API”，而是绕过平台限制的务实做法。
- 不要在
for循环里直接改 style —— 会强制同步重排，卡死界面 - 用
raf而非setTimeout，保证每帧执行一次，H5 和小程序都兼容 - 小程序中操作
style必须用uni.createSelectorQuery()获取节点，再调用fields({ node: true })才能拿到可操作的node - App 端（vue 页面）可直接用
ref+$el，但 nvue 需走uni.createAnimation（仅限 nvue）
小程序平台下 animation API 的典型误用
即使在微信小程序里，uni.createAnimation 也容易因生命周期或节点时机问题失效。
常见错误现象：export() 后 setData 没变化、动画只执行一次、多个 step 被覆盖。
- 必须在
onReady或节点渲染完成后再创建 animation 实例，onLoad时节点可能还没挂载 -
animation.export()返回的是 JSON 对象，要赋值给 data 中的字段（如this.animationData = animation.export()），不能直接塞进setData参数里 - 每次动画前都要新建 animation 实例，复用旧实例会导致 step 积累、行为不可控
- 小程序中不支持
rotateZ，要用rotate；skew参数顺序和 CSS 不一致（如skew(30deg, 20deg)写成skew(30, 20)）
跨端动画最麻烦的从来不是“怎么写”，而是“什么时候写”和“在哪写”。不同平台对节点、样式、JS 执行时机的理解差异极大，硬套一套代码只会反复踩坑。把 CSS 当主力，JS 控制当补位，animation API 只在确定是微信小程序且需要复杂序列时再启用 —— 这样反而省时间。
