加购弹窗需用 transform + transition 实现平滑上浮，起始态 translateY(100%) opacity: 0，结束态 translateY(0) opacity: 1；小程序推荐 uni.createAnimation 保障兼容性；遮罩层须 full-viewport 覆盖并正确设置 z-index 与 pointer-events。
加购弹窗怎么用 CSS transition 实现平滑上浮
直接用 v-if 或 v-show 控制显隐会硬切，必须配合 transform + transition 才有“从底往上滑出”的观感。关键不是“显示”，而是让弹窗容器从 transform: translateY(100%) 动态过渡到 transform: translateY(0)。
常见错误是只写 transition: all 0.3s，但没设 position: fixed 或漏掉 z-index，导致动画期间被其他元素遮挡或定位漂移。
- 弹窗外层必须设
position: fixed; bottom: 0; left: 0; width: 100% - transition 只作用于 transform 和 opacity，避免写
all——否则字体、背景色等也会参与过渡，拖慢渲染 - 起始状态用
transform: translateY(100%); opacity: 0，结束状态用transform: translateY(0); opacity: 1 - iOS 微信里
transform偶发失效，加translateZ(0)或will-change: transform强制 GPU 加速
为什么 uni.createAnimation 在小程序里更稳
Web 端靠 CSS 就够了，但微信小程序不支持部分 CSS transform 属性（比如某些版本下 translateY(100%) 计算异常），且 v-if 切换时动画容易被中断。这时得用 uni.createAnimation 手动控制动画帧。
它本质是把动画逻辑交给原生层执行，比 JS 操控 style 更可靠，尤其在低端安卓机上。
- 创建动画实例要传入
duration和timingFunction，例如cubic-bezier(0.34, 1.56, 0.64, 1)能模拟“先快后缓”的上浮感 - 动画对象不能复用：每次打开弹窗都得新建一个
uni.createAnimation()实例，否则多个点击会覆盖前一次动画 - 调用
exportComponent获取组件实例再执行animate，不能直接对ref元素调用 —— 小程序里ref不等于 DOM 节点 - 动画结束后记得手动重置状态，否则下次打开可能卡在中间位置
弹窗遮罩层怎么避免点击穿透
遮罩层（mask）本意是拦截点击、防止误触底层内容，但很多人写成 @tap="hideModal" 放在 mask 上，结果发现点不到——因为弹窗内容区域盖住了 mask，或者 mask 没设 pointer-events: auto。
真实场景中，遮罩必须严格覆盖整个可视区，且层级高于弹窗内容但低于弹窗标题栏（如果有）。
- mask 的
width和height必须是100vw和100vh，不能依赖父容器高度（滚动时会漏底） - mask 元素的
z-index要比弹窗主体低 1 级，例如弹窗设z-index: 2000，mask 就设z-index: 1999 - mask 内部不要嵌套可交互元素；如果需要关闭按钮，应放在弹窗内部，而非 mask 上
- H5 端可用
pointer-events: none配合子元素pointer-events: auto实现局部响应，小程序不支持该写法，需改用绝对定位按钮覆盖
多商品列表里加购按钮怎么避免动画错位
在 v-for 渲染的商品卡片里放“加入购物车”按钮，点哪个就弹哪个对应的加购弹窗——但很多人共用同一个 showModalStatus 变量，导致 A 商品点开，B 商品的弹窗也跟着出来。
这不是动画问题，是状态管理错乱。起点坐标、弹窗内容、开关状态都得按 item 绑定，不能全局共享。
- 每个商品项用独立的
isShowCartPopup字段，而不是页面级 data 里的单个布尔值 - 弹窗内容通过
:data-item="item"传入，而不是靠 index 查数组 —— 列表增删后 index 会变 - 如果用 ref 定位按钮位置，ref 名必须带 item.id，例如
:ref="'btn-' + item.id"，否则this.$refs['btn']只返回第一个 - 动画触发前加
uni.pageScrollTo检查当前滚动位置，否则弹窗底部可能被截断（尤其长列表里点顶部商品）
transform 无法触发布局重排动画，得配合 max-height 过渡或用 resizeObserver 监听高度变化再补一帧动画。 
