点击收藏图标缩放动画卡顿或不触发，需强制gpu加速（加translatez(0)）、用transition+class切换、$nexttick控制时机、统一贝塞尔曲线并显式设置transform-origin。
点击收藏时图标缩放动画卡顿或不触发
uni-app 的 view 或 image 元素默认不开启硬件加速，缩放动画（transform: scale()）在部分安卓 WebView（尤其旧版 X5 内核）中容易掉帧甚至无反应。直接写 animation CSS 类常因样式未强制重绘而失效。
实操建议：
- 给收藏图标容器添加
style="transform: translateZ(0);"或style="-webkit-transform: translateZ(0);"，强制启用 GPU 加速 - 动画必须用
transform+transition实现，避免操作width/height或scale()以外的属性 - 绑定 class 时用
:class动态切换，不要用内联style覆盖 transition - 确保父容器没有
overflow: hidden且未设置transform（否则会截断缩放后的图层）
uni-app 中 scale 动画无法还原或多次点击错乱
常见于用 data 控制图标状态（如 isCollected），但未同步更新动画 class 触发时机：点击后立刻改值，Vue 的响应式更新和 DOM 重排存在微小延迟，导致 scale 还原动画被跳过。
实操建议：
- 用
this.$nextTick()延迟切换动画 class，例如：toggleCollect() {<br> this.isCollected = !this.isCollected;<br> this.$nextTick(() => {<br> this.animClass = 'animate-scale';<br> setTimeout(() => { this.animClass = ''; }, 300);<br> });<br>} - CSS 中定义两个关键帧：
.animate-scale { transform: scale(1.3); transition: transform 0.3s ease; }，还原靠 class 清空自动回退 - 避免在
watch里监听isCollected并触发动画 —— 容易与用户快速连点冲突
真机上 iOS 和安卓表现不一致
iOS 的 WKWebView 对 transform 支持稳定，但安卓各厂商 WebView 差异大：华为/小米部分机型需加 -webkit- 前缀；OPPO/vivo 某些版本对 transition 的 timing function 解析异常（如 cubic-bezier(.2, .8, .4, 1) 可能被忽略）。
实操建议：
- CSS 动画统一用
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);—— 这个贝塞尔曲线在双端兼容性最好 - 在
App.vue的<style></style>中全局补充前缀：.animate-scale {<br> -webkit-transform: scale(1.3);<br> transform: scale(1.3);<br> -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);<br> transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);<br>} - 避免使用
animation关键帧语法（@keyframes），它在 H5 端部分安卓 WebView 中不触发重绘
收藏图标缩放后位置偏移或层级错乱
缩放基于元素中心点（transform-origin: center center），但若图标父容器是 flex 布局且未设 align-items: center，缩放时视觉中心会“漂移”；另外，z-index 在 transform 元素上会创建新层叠上下文，导致图标被遮挡。
实操建议：
- 显式设置图标容器的
style="transform-origin: center center;" - 父级 flex 容器加
align-items: center; justify-content: center;，避免缩放拉伸后相对位置变化 - 如果图标被其他元素遮盖，给其父容器加
style="z-index: 10;"（注意：z-index必须配合position: relative才生效） - 慎用
position: absolute套缩放图标 —— 绝对定位 + transform 容易在不同屏幕宽度下错位
translateZ(0) 的 GPU 启用和 $nextTick 的时机控制 —— 少一个，就可能在某台手机上完全看不到效果。
