transition不适合实现红包雨金币连续掉落动画，因其仅支持起始/结束状态切换，无法逐帧控制位置、旋转、缩放等多变量同步变化；应拆分为js驱动的下落过程+transition管控的入场与落地两段动画。
transition 本身不适合直接实现红包雨中金币的连续掉落动画，它只适用于“状态切换”类效果，比如从隐藏到显示、从缩放0到1、从透明到不透明。而金币下落是持续运动过程，需要逐帧控制位置、旋转角度、缩放比例——这超出了 transition 的能力边界。
为什么 transition 不适合做下落动画
transition 是声明式动画，只能定义起始和结束两个状态之间的过渡。金币掉落涉及多个变量同步变化：
- top 或 transform: translateY() 持续增大（下落）
- transform: rotate() 随机增加或减少（旋转）
- transform: scale() 在落地前微调（缩放）
- 可能还要叠加 opacity 渐变或 shadow 变化
这些参数无法用单一 transition 属性统一描述；强行组合会导致生硬、不同步，且无法控制中间节奏（比如先快后慢的重力感）。
更合理的做法：用 transform + transition 做“入场”和“落地”两段
可以将金币动画拆成两个可被 transition 管控的阶段，其余交给 JavaScript 控制：
-
入场阶段：金币刚生成时，用 transition 实现“淡入+轻微放大”，例如：
opacity: 0; transform: scale(0.6) translateY(-20px);
添加transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
再通过 JS 切换 class 让它变为opacity: 1; transform: scale(1) translateY(0); -
落地反馈阶段：金币触底或被点击时，用 transition 做“弹跳+缩小+消失”，例如：
transform: scale(1.2) translateY(5px); opacity: 1;
过渡到transform: scale(0.1) translateY(20px); opacity: 0;
真正驱动下落的核心是 requestAnimationFrame
每个金币应是一个独立 DOM 元素（或 canvas 绘图对象），JS 每帧更新其样式：
- 维护
y（垂直位置）、rotation（旋转角度）、scale（缩放系数）等变量 - 在
requestAnimationFrame回调中递增y += speed，累加rotation += spinSpeed，并按需调整scale - 用
element.style.transform = `translateY(${y}px) rotate(${rotation}deg) scale(${scale})`实时写入 - 配合 will-change: transform 和硬件加速（如
transform: translateZ(0)）提升性能
小技巧：用 CSS 自定义属性辅助 JS 动画
可在元素上设置 CSS 变量，让部分逻辑保留在样式层：
- HTML：
<div class="coin" style="--y:0; --r:0; --s:1"></div> - CSS：
.coin { transform: translateY(var(--y)) rotate(var(--r)) scale(var(--s)); } - JS 中只需更新
el.style.setProperty('--y', y + 'px')等，避免频繁拼接字符串
这样既保持 JS 对动画逻辑的掌控力，又让渲染层更干净，也方便后续用 CSS @property 做类型校验（如支持 rotate 的 deg 单位）。
