真正可用的转盘需用cubic-bezier(0.34,1.56,0.64,1)模拟惯性，动态计算总角度并实时读取prizeOffset；SVG扇区须保留pointer-events默认值；监听animationend且过滤transform属性；移动端拖拽应改用requestAnimationFrame平滑过渡。
用 CSS animation 实现转盘惯性旋转，别碰 transform: rotate() 硬设值
直接写 transform: rotate(3600deg) 会卡顿、没减速、停不准。真正可用的转盘必须靠 animation-timing-function 模拟物理惯性——用 cubic-bezier(0.34, 1.56, 0.64, 1)（非标准缓动，手动调出“甩出去又慢回”的感觉），配合动态计算总旋转角度：baseAngle + random(360 * 3 ~ 360 * 5) + (360 - prizeOffset)，其中 prizeOffset 是中奖区块起始角度，必须从 SVG 或 DOM 元素上实时读取，不能手算。
SVG 转盘扇区点击区域失效？pointer-events: none 别乱加
很多人给 <path></path> 加 pointer-events: none 是为了透传点击到下层按钮，结果整个扇区点不动了。正确做法是：只对装饰性图形（如阴影、高光层）设 pointer-events: none；每个可中奖扇区的 <path></path> 必须保留默认行为，并绑定 click 事件或用 getPointAtLength() 做坐标判定。若用 <div> 层叠模拟扇区，务必加 <code>z-index 和 cursor: pointer，否则移动端 touch 事件可能不触发。
抽奖逻辑卡在「转完才通知」？用 animationend 而非 setTimeout
setTimeout 容易和动画时长不同步，尤其用户快速连点时会错乱。监听转盘容器的 animationend 事件才是可靠方案，但要注意：Chrome 会触发两次（一次 for transform，一次 for opacity），需用 event.propertyName === 'transform' 过滤；Safari 对 SVG 元素的 animationend 支持不稳定，建议统一监听外层 <div class="wheel-wrapper">。中奖结果必须在该事件回调里解析，而不是靠预设的倒计时序号。<h3>移动端转盘拖拽卡顿？放弃 <code>touchmove + transform 手动更新
用 touchmove 实时改 style.transform 会导致频繁重排，iOS 很容易掉帧。真要支持拖拽，应：① 用 CSS touch-action: none 禁用浏览器默认滑动；② 在 touchstart 记录初始角度，touchmove 只存 delta 值；③ touchend 后用 requestAnimationFrame 平滑过渡到目标角度，而非立刻跳转。更轻量的做法是干脆禁用拖拽，只保留点击触发——多数活动页实际不需要拖拽，强行加反而引入兼容性问题。
立即学习“前端免费学习笔记（深入）”；
