uni-app 页面跳转动画在 pages.json 的页面 style 中配置 animationType 和 animationDuration,仅对 navigateTo 等非 tabBar 跳转生效;switchTab 固定淡入淡出且不可改;Android/iOS 默认动画不同,需用 pop-in 或 slide-in-right 覆盖;H5 忽略 animationType,需 CSS 模拟;动画失效常见于 tabBar 误用、漏配 animationDuration 或调试模式限制。
uni-app 页面跳转动画在哪配置
动画效果由 pages.json 中的 animationtype 和 animationduration 控制,不是在 js 里调用函数实现的。改错地方会导致完全没反应。
-
animationType只对navigateTo、redirectTo等非 tabBar 跳转生效;switchTab固定是淡入淡出,无法修改 - 必须写在
pages数组每个页面对象的style下,全局style不起作用 - Android 和 iOS 默认动画不同(Android 是右滑进,iOS 是上推),
animationType设为pop-in或slide-in-right才能覆盖原生行为
uni-app 支持哪些 animationType 值
可用值有限,且平台兼容性差异大。别硬套 Web 动画思路,uni-app 的动画是原生容器控制的,不是 CSS transition。
- 常用可靠值:
pop-in(淡入)、slide-in-right(从右滑入)、slide-in-left(从左滑入)、fade(淡入淡出) -
zoom-fade、rotate在部分 Android 机型上会失效或卡顿,不建议线上使用 - H5 平台走的是 CSS 动画,
animationType会被忽略,需单独用uni.navigateTo的success回调 + class 切换模拟
自定义动画失败的三个典型现象
看到没动画、闪一下、或者跳转后页面白屏,大概率是下面这几个点没对上。
- 在
tabBar页面之间用navigateTo—— 此时路由未真正切换,animationType不触发,应改用switchTab(但动画不可控) - 目标页面的
style里漏写了animationDuration,即使写了animationType也会退回到默认毫秒级瞬切 - App 端开启调试模式(如 HBuilderX 的“运行到手机”)时,某些动画被强制禁用,真机打包后才正常,本地调试容易误判
需要更精细控制?绕过 pages.json 直接操作
如果要实现入场缩放+透明度+延迟,或和业务逻辑强绑定(比如表单校验失败时不执行动画),就得放弃声明式配置,改用 API 层控制。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
- 先调用
uni.navigateTo({ url: '/page/detail', animation: false })关掉默认动画 - 在目标页面
onLoad里用uni.createSelectorQuery()拿到根节点,再通过addClass触发预设的 CSS 动画(仅 H5/小程序有效) - App 端只能靠
plus.webview.currentWebview().setStyle()动态设置popIn或slideIn,但参数粒度很粗,没法组合
复杂动效意味着要为三个平台分别兜底,最麻烦的不是写法,而是 iOS 和 Android WebView 渲染节奏不一致导致的帧率抖动 —— 这个得靠反复真机测,模拟器看不出问题。










