animationtype 无效主要因平台不支持、跳转方式错误或配置位置不对;须配在 pages.json 页面 style 中,仅对 uni.navigateto/redirectto 生效,h5 需 css 实现,app 真机才正常。

pages.json 里配 animationType 没反应?先确认这三件事
动画不生效,90% 是因为没对上平台、跳转方式或配置位置。animationType 不是写在 JS 调用里,而是必须落在 pages.json 对应页面的 style 字段中,且只对 uni.navigateTo 和 uni.redirectTo 生效。
-
switchTab固定走系统淡入淡出,animationType配了也忽略 - H5 平台完全不读
animationType,得靠 CSS@keyframes+ class 切换模拟 - App 端开启 HBuilderX “运行到手机” 调试时,部分动画会被强制禁用,真机打包后才正常
App 端滑入/缩放动画怎么选?别只看名字
可用值就那几个:slide-in-right、pop-in、fade、none,但它们在 iOS 和 Android 上默认行为不同。比如 slide-in-right 在 iOS 是右滑进,在 Android 可能是底部上推——这不是 bug,是平台原生导航习惯。
- 想统一行为?必须显式覆盖:把
animationType设为slide-in-right或pop-in,不能依赖默认 -
animationDuration建议设在200~400之间,150太快像闪,600以上用户会怀疑卡了 - 如果页面用了自定义导航栏(非原生导航栏),原生动画大概率失效,得切回 CSS 方案
H5 页面跳转要动画?绕开 pages.json 直接写 CSS
H5 根本不认 animationType,你配了等于白配。必须用 CSS 控制新旧页面 DOM 的进出状态,配合 uni.navigateTo 的 success 回调手动加 class。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
- 关键不是“怎么写动画”,而是“什么时候加 class”:要在新页面
onLoad后、DOM 渲染完成再触发,否则动画不执行 - 推荐用
v-show+ class 替代v-if,避免小程序里 DOM 销毁重建导致动画中断 - transition 必须明确属性,比如
transition: transform .3s, opacity .3s,不能写transition: all .3s
需要入场缩放+延迟+校验联动?放弃声明式配置
当动画要和业务强耦合(比如表单未填完就不动效、加载中禁用跳转、或进入后等图片加载完再展开),pages.json 的静态配置就撑不住了。
- App 端可调
plus.webview.currentWebview().setStyle()动态设popIn,但参数极粗,没法组合 scale + rotate + delay - 真要精细控制,只能用 CSS +
requestAnimationFrame手动驱动,或在onShow里用this.$nextTick触发 class 切换 - 注意:nvue 页面支持原生动画 API,但普通 vue 页面不行,别在 vue 里写
uni.createAnimation—— H5 和 App 会直接报is not a function
最常被忽略的点:动画不是加了就完事,它依赖平台渲染机制、页面生命周期时机、甚至构建模式。调试时看到没效果,别急着换方案,先查是不是在 tabBar 页面里试 slide-in-right,或者 H5 下还在 pages.json 里死磕 animationType。










