必须同时声明 transform 和 opacity 的 transition 且用逗号分隔，如 transition: transform 0.3s ease, opacity 0.3s ease；仅用 all 或单属性会导致闪现、无膨胀或意外过渡；动画需 JS 控制类名配合 transitionend 事件，避免 :active 截断；scale 不可用 0，改用 0.01；移动端优先 touchstart 并防双击缩放。
transition 要同时控制 transform 和 opacity 才能自然
只加 transform 过渡，心形会突然闪现；只加 opacity，又没膨胀效果。必须两者都声明在 transition 里，且用逗号分隔，否则浏览器只认第一个属性。
-
transition: transform 0.3s ease, opacity 0.3s ease;—— 缺一不可 - 如果写成
transition: all 0.3s;，可能意外触发其他属性（比如color）的过渡，导致视觉干扰 - 别漏掉
ease或类似缓动函数，线性（linear）会让膨胀显得机械生硬
:active 伪类无法撑起完整动画流程
用户点下去瞬间触发 :active，松开就回退，根本来不及播完“膨胀→缩回”两段。真实点赞动画得靠 JS 控制类名切换，把状态从“未点”→“点击中”→“已点”拆开。
- 初始状态：
.like-btn→ 心形小、半透明 - 点击后加类：
.like-btn.is-animating→ 触发transform: scale(1.4)+opacity: 1 - 动画结束用
transitionend事件移除该类，自动缩回（靠 CSS 回退到原始样式） - 不监听
transitionend就直接删类？动画会被截断，心形卡在放大态
scale(0) 会导致子元素消失，心形路径渲染异常
SVG 心形或伪元素做的心形，若用 scale(0) 收缩，某些浏览器（尤其是 Safari）会直接跳过渲染，松开后心形不出现。安全做法是用极小但非零值。
- 避免
transform: scale(0); - 改用
transform: scale(0.01);或transform: scale(0.1); - 配合
opacity: 0隐藏，视觉上仍是“消失”，但 DOM 渲染不受影响 - 如果心形是
::before伪元素，还要确认父元素没设overflow: hidden，否则缩放时边缘被裁
移动端 touch 事件比 click 更可靠
在 iOS 上，click 有约 300ms 延迟，用户点完看到动画滞后，体验像卡顿。直接绑定 touchstart 启动动画，再用 touchend 清理，响应更跟手。
立即学习“前端免费学习笔记（深入）”；
- JS 中优先监听
touchstart，而非click - 记得加
preventDefault()防止双击缩放（仅当按钮区域易误触时） - 为兼容非触屏设备，可 fallback 到
click，但别混用：同一按钮只选一种事件源，否则可能触发两次动画 - 别忘了移除事件监听器，尤其按钮可重复点击时，避免内存泄漏
