必须主动中断进行中的transition，否则新样式覆盖旧动画时间线会导致视觉抽搐、跳变或“呼吸式闪烁”；需用offsetwidth强制重排、transition写在常态选择器中，并启用合成层。
transition 被快速覆盖时视觉跳变
连续点击按钮或切换状态时，transition 不会自动中断前一次动画，新样式直接覆盖旧样式，导致元素“抽搐”“回弹”或“卡在中间态”。这不是浏览器 bug，而是 CSS 的默认行为：过渡一旦开始，就按原时间线走完，除非你主动干预。
常见现象：transform 动画还没结束，第二次点击又触发了相同属性的过渡，结果看到元素先回退半截再继续动；或者 opacity 闪一下就归零。
- 别把
transition写在:hover或.active里，必须放在常态规则中（如.btn { transition: transform 0.2s, opacity 0.15s; }） - 每次点击前，用
el.offsetHeight强制重排，清空当前过渡上下文 - 配合
requestAnimationFrame恢复过渡：先设el.style.transition = 'none'→ 触发重排 → 下一帧再恢复带transition的样式
animation 多次触发后节奏错乱
animation 本身不支持“中断重播”，连续调用 element.classList.add('animate') 只会覆盖 animation-name，但不会重置计时器。如果动画没设 forwards 或延迟值不对，就会出现“闪回”或“堆叠播放”。
错误做法：反复切换 class、只改 animation-delay、用多个独立 animation 声明。
- 重播动画必须强制重排：先清空
animation-name（el.style.animationName = 'none'），再读取el.offsetHeight，最后恢复animation-name和目标animation-delay - 多动画并行时，必须合并声明，用逗号分隔：
animation: fade 0.3s, slide 0.4s 0.3s;，且animation-fill-mode、animation-timing-function等要一一对应 - 避免用
display: none控制可见性——它会让animationend不触发；改用visibility: hidden; opacity: 0;
点击期间交互失效或坐标偏移
动画中点击失灵，不是因为 pointer-events: none 被写了，而是浏览器事件命中框（hit area）未同步更新。尤其当 transform 改变位置但布局未重排时，鼠标点下去的位置和视觉位置对不上。
更隐蔽的问题是：连续点击同一位置，动态创建的动画元素（如点击波纹、爱心图标）可能因父容器 transform 累积或 getBoundingClientRect() 计算滞后，最终出现在左上角。
- 给动画元素加
will-change: transform，提示浏览器提前准备合成层，减少坐标映射延迟 - 关键帧里显式写
pointer-events: auto（如0% { pointer-events: auto; }），防止 CSS 层叠覆盖 JS 设置 - 若需“动画中仍可点”，把可点击子元素提一层 DOM，脱离父级
transform影响 - 防抖阈值建议设为 50ms：比人眼感知延迟低，又能过滤高频抖动
最易被忽略的合成层陷阱
哪怕写了 transform 和 opacity，如果没真正进入 GPU 合成管线，动画照样掉帧、点击错位、transitionend 不触发。DevTools 的 Layers 面板里看不到独立图层，说明合成失败。
很多项目加了 transform: translateZ(0) 就以为万事大吉，但它在某些 WebView 下失效，且可能引发其他渲染问题。
- 最稳妥的触发方式是
backface-visibility: hidden，不改变视觉，兼容性好，还能绕过部分 WebView 的亚像素渲染缺陷 - 避免用
transition: all 0.3s——它会让margin、border-color这类无法合成的属性也参与过渡，拖垮整条链 - 高频区域（导航栏、标签页）必须 JS + CSS 双控：JS 层做防抖 +
pointer-events临时禁用，CSS 层确保合成层就绪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
