uni-app动画效果实现 uni-app如何使用animation API

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，不支持该 APIuni-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 实现平滑更新。 Zeemo AI 一款专业的视频字幕制作和视频处理工具