uni-app转盘动画不灵因浏览器跳过重绘，需强制重排：先设rotate(0deg)并requestAnimationFrame后再设目标角度，配合transition和权重算法计算中奖扇区，注意iOS兼容性及文字反向旋转层级。
uni-app里用transform: rotate()做转盘动画不灵？关键在CSS动画重置
直接用animation或transition改rotate()值，第二次点击经常不动——因为浏览器认为起始角度没变，跳过了重绘。必须强制触发重排，常见做法是清空transform再设新值，或用keyframes配合动态类名。
实操建议：
- 给转盘容器加
transition: transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94)（用缓动函数模拟惯性停顿） - 每次抽奖前先设
transform: rotate(0deg)并setTimeout一帧（requestAnimationFrame更稳妥），再设目标角度 - 避免用
%单位写animation关键帧——uni-app的web-view和小程序平台对@keyframes支持不一致，优先走JS控制style.transform
怎么算中奖角度？别硬编码，用Math.random() + 扇区数组
手动写if (deg > 30 && deg 容易错位，尤其扇区数量变化时。正确做法是预定义奖品数组，按权重生成角度区间。
示例逻辑：
const prizes = [
{ name: '谢谢参与', weight: 3 },
{ name: '10元券', weight: 2 },
{ name: 'iPhone', weight: 1 }
]
const totalWeight = prizes.reduce((sum, p) => sum + p.weight, 0)
const rand = Math.floor(Math.random() * totalWeight)
let acc = 0
let winner = prizes[0]
for (let i = 0; i < prizes.length; i++) {
acc += prizes[i].weight
if (rand < acc) {
winner = prizes[i]
break
}
}
// 转盘总圈数 + 偏移量 = 最终旋转角度
const baseAngle = 360 * 5 // 转5圈增加随机感
const sectorAngle = 360 / prizes.length
const offset = (prizes.indexOf(winner) + 0.5) * sectorAngle // 指向扇区中心
const targetAngle = baseAngle + offset
uni-app真机上转盘卡顿？禁用will-change，改用translateZ(0)
很多教程让加will-change: transform提升性能，但在微信小程序或Android低端机上反而引发渲染撕裂。uni-app编译后实际运行环境是WebView或自研渲染层，对CSS新特性兼容有限。
更稳妥的加速方式：
- 给转盘元素加
style="transform: translateZ(0);"触发GPU加速（比will-change更兼容） - 确保转盘图片用
webp格式且尺寸不大于800px，否则iOS WKWebView会降帧 - 抽奖过程中禁用用户点击：用
v-if切换按钮状态，而非仅disabled——小程序里disabled不阻止tap事件冒泡
小程序平台无法监听transitionend？改用setTimeout + 固定时长判断
微信/支付宝小程序里transitionend事件不可靠，尤其是安卓端常不触发。不能依赖它回调“抽奖结束”，得用时间兜底。
安全做法：
- 把动画时长（如4000ms）存在data里，启动动画时
setTimeout(() => { this.onRotateEnd() }, 4000 + 100)（+100ms容错） - 如果需要中途取消动画（比如用户连点），记得
clearTimeout并重置transform为初始值 - 不要用
getComputedStyle(el).transform读取实时角度——小程序里返回空字符串，H5也因优化可能不准
最易被忽略的是扇区文字朝向：用transform: rotate(-Xdeg)反向旋转文字时，必须和转盘同一DOM层级，否则旋转中心偏移；另外iOS Safari对transform-origin的百分比解析有bug，统一用50% 50%而非center。
