必须显式添加transition才能实现transform缩放动画，否则瞬时跳变；推荐用:style绑定scale值并配合touchstart/touchend实现按压反馈，同时需禁用will-change、overflow:hidden和backface-visibility等引发渲染异常的属性。
uni-app里用transform: scale()做点击缩放，为什么没动画？
因为默认没有声明过渡效果。CSS 的 transform 变化是瞬时的，必须显式加 transition 才会有缓动动画。
常见错误写法：.btn { transform: scale(1.2); } —— 点击后立刻跳变，无动画。
正确做法是：在常态样式中定义 transition，再通过 class 切换或内联 style 控制 transform 值：
- 推荐在 class 中统一管理过渡：例如
.scale-btn { transition: transform 0.2s ease; } - 避免写成
transition: all 0.2s，它会触发重排，影响性能，尤其在低端 Android 设备上容易卡顿 - uni-app 的
App.vue或页面<style>中写即可，无需额外平台适配
在 uni-app 中用 data 控制缩放状态，怎么写最稳？
直接绑定 style 是最可控的方式，比切换 class 更灵活（比如要支持多级缩放、不同按钮不同倍数）。
立即学习“前端免费学习笔记（深入）”；
示例（Vue 2 / Vue 3 通用写法）：
<view
class="icon-btn"
:style="{ transform: `scale(${isScaled ? 1.15 : 1})` }"
@tap="isScaled = !isScaled"
></view>
注意点：
-
isScaled必须在data()（Vue 2）或ref()/reactive()（Vue 3）中正确定义，否则响应式失效，缩放不触发 - 不要用
v-bind:transform，uni-app 不支持该指令简写，只能走:style - 若需点击反馈+松手还原（类似按钮按压），建议用
@touchstart和@touchend替代@tap，避免 iOS 上延迟
真机上缩放抖动、模糊或闪退？这些 CSS 属性得关掉
部分 Android WebView 和微信小程序渲染层对 transform 处理不一致，尤其叠加其他属性时容易出问题。
必须检查并禁用以下几项：
- 去掉
will-change: transform：uni-app 自身已做优化，手动加反而引发重绘异常 - 避免父容器设
overflow: hidden+ 子元素缩放：裁剪边界计算错，导致视觉错位或闪烁 - 禁用
-webkit-backface-visibility: hidden：在 H5 端可能让文字发虚，小程序端无效还报 warning - 如果缩放对象含图片，确保图片
width/height固定，否则缩放时会触发 layout 波动
想兼容小程序和 H5，但 transform-origin 表现不一致？
小程序（尤其是微信）默认以左上角为缩放原点，而 H5 默认是中心点，导致同样代码在不同平台“偏移感”明显。
解决方式很直接：显式声明原点位置：
- 居中缩放（最常用）：加
transform-origin: center; - 若要锚点随手指位置变化（如长按某点放大），需用 JS 动态计算坐标并设置
transform-origin: Xpx Ypx，但小程序getBoundingClientRect在某些版本有偏移，建议只在 H5 使用 - uni-app 编译到 App 时，使用的是 weex 渲染器，
transform-origin支持度低，此时应降级为固定 scale + margin 微调，而非强依赖 origin
缩放动画看着简单，但跨端时原点、过渡时机、渲染层差异才是实际卡点。别迷信「一套代码跑三端」，该分平台微调就得微调。
