纯 CSS transition 无法实现强反馈点赞动画，必须用 JS 动态生成红心等元素并管理生命周期；否则用户感知弱、连点失效、内存泄漏、定位错乱。
直接说结论：纯 CSS transition 只能做“按钮本身状态变化”，比如缩放、变色；真要让用户“一眼看见点赞发生了”，必须用 JS 动态生成动画元素（红心、气泡、SVG 路径），否则反馈太弱，互动意愿不升反降。
为什么transition不能替代真实动画元素
很多开发者试图只靠 :hover 或 :active + transition 实现“点赞反馈”，结果用户点完毫无感知——因为这种过渡只作用于按钮自身，没有外部视觉信号。心理学上叫“操作-反馈延迟断裂”，用户会下意识怀疑是否点成功。
-
transition无法产生新 DOM 节点，也就没法做飞入、飘散、叠加等空间动效 - 移动端
:active在部分安卓 WebView 中根本不会触发，transition形同虚设 - 点赞数变更若不同步动画，用户会盯着数字等 200ms，体验割裂
用document.createElement生成红心时必须设dataset.ttl
每次点都 document.createElement('span') 很容易内存泄漏——旧节点不删，页面卡顿、z-index 错乱、定位偏移全跟着来。
- 创建时立刻写生命周期：
el.dataset.ttl = Date.now() + 1500（1.5 秒后自动清理） - 用
requestAnimationFrame做清理队列，别用setTimeout：切后台时setTimeout暂停，切回来一堆红心同时爆炸 - 清理逻辑示例：
if (Date.now() > el.dataset.ttl) el.remove()，放在 rAF 回调里统一执行
红心飞入路径错位？先查容器有没有position: relative
红心总飞出屏幕、卡在顶部或弹幕层后面，90% 是因为父容器没设 position: relative。CSS 定位规则是：position: absolute 的元素，其 top/left 基准是**最近的已定位祖先**（即 position 不为 static 的父级）。
立即学习“前端免费学习笔记（深入）”；
- 直播间容器必须显式加：
.like-container { position: relative; width: 100%; height: 100%; } - 初始
left要动态算：Math.random() * container.offsetWidth - 20（减去红心宽度一半，防出界） - 禁用父级的
transform（如translateZ(0)），它会隐式创建层叠上下文，把红心“锁”在局部坐标系里
移动端连点失效？换touchstart + 节流
iOS Safari 和安卓 WebView 对 click 事件的触发时机和频率处理差异极大。300ms 内连点 5 下，可能只响应前 1–2 次，或者动画丢帧严重。
- 绑定
touchstart替代click，并立即preventDefault()阻止默认滚动行为 - 加简单节流：
if (Date.now() - lastClickTime - 飞入中的红心元素必须设
pointer-events: none，否则会拦截后续触摸事件 - 动画用
transform: translateY()+will-change: transform，别用top/left触发重排
真正难的不是让红心飞起来，而是让它飞得准、消失得干净、连点不卡、跨设备一致——这些细节没处理好，动画反而变成干扰项。
