uni-app 的 show/hide 不触发动画，需用 v-if + transition 自定义弹窗并设置 transform-origin 等样式确保缩放位移自然；h5 与小程序动画应统一用 transition 控制，避免 @keyframes 和平台差异问题。
uni-app 的 show 和 hide 不触发动画？
因为 uni-app 的 uni.showModal、uni.showToast 等原生弹窗不支持自定义动画，想缩放+位移，必须自己写组件，用 v-if 或 v-show 控制显隐，再配合 transition 或 animation。
常见错误是直接给 uni.showModal 加 animation 类——没用，它压根不走 Vue 渲染流程。
- 用
uni.createSelectorQuery()获取弹窗节点宽高前，确保节点已挂载（$nextTick后调用） - 缩放动画推荐用
transform: scale()，别用width/height，避免重排 - 位移建议用
transform: translateX/Y()，和缩放一起写进同一个transform值里，比如transform: scale(0.8) translateY(-20px)
uni-app 中 transition 动画卡顿或不执行？
Vue 的 <transition></transition> 在 uni-app 里默认只对 v-if 生效，v-show 不会触发动画钩子。如果你用 v-show 控制弹窗，transition 就是摆设。
正确做法：用 v-if + <transition></transition> + 自定义 name，并在样式中写好 .my-popup-enter-active 等类名。
- 必须给
<transition></transition>加name属性，否则类名默认是v-开头，容易和其它组件冲突 - 动画时长要和 CSS 中
transition-duration严格一致，否则leave-to阶段可能被跳过 - H5 端可用
transform+will-change: transform提升动画性能；小程序端慎用will-change，部分平台不支持
小程序真机上缩放动画失真或偏移？
微信/支付宝小程序的 transform-origin 默认是 50% 50%，但如果你的弹窗内容高度动态（比如文字行数不确定），缩放中心点没对齐，就会看起来“歪了”或者“飘了”。
常见现象：弹窗从顶部中间放大，结果实际是从左上角缩放；或者缩放后位置偏移几十像素。
- 显式设置
transform-origin: center或transform-origin: 50% 50%，不要依赖默认值 - 如果弹窗使用
position: fixed，注意某些小程序版本下transform会和fixed冲突，可改用position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%) scale(...) - 安卓低端机上
scale(0)可能导致元素消失后无法恢复，建议最小缩放用scale(0.01)
如何让动画在 H5 和小程序表现一致？
uni-app 编译到不同平台时，CSS 动画兼容性差异大：H5 支持 @keyframes 全套，小程序只支持基础 transform + opacity，且部分属性（如 filter）直接忽略。
最稳的方案是放弃 @keyframes，全部用 transition + 类名切换控制，靠 JS 控制 class 增删时机。
- 动画逻辑统一收口在
data中一个布尔值（如isPopupVisible），避免平台判断分支污染模板 - 缩放 + 位移组合动画，优先写成单条
transform声明，例如transform: scale(0.9) translateY(-10px)，而不是分开写scale和translate - 小程序真机调试务必打开「调试基础库」最新版，旧版
transform行为可能和文档不符
缩放动画最难调的其实是“起始态”的视觉锚点——用户感知的不是代码里的 0.8 或 1.0，而是动画是否自然地从某个焦点“生长”出来。这个焦点得靠 transform-origin 和容器定位共同决定，改一处，往往三处都要同步验证。
