transition必须写在基础样式中，否则首次悬停或点击无动画；应优先使用transform和opacity，避免top/left/width等触发重排；多属性用逗号分隔，禁用all；移动端注意兼容性与连点处理。
transition 必须写在基础样式里，否则首次点击或悬停没动画
浏览器只对“属性值变化过程”做过渡，如果初始状态没声明 transition，它根本不知道该从哪开始过渡。很多人把 transition 写在 :hover 或 :active 里，结果第一次悬停/点击时样式瞬间跳变，毫无动画感。
常见错误写法：.btn:hover { transition: background-color 0.2s; }
正确做法是把 transition 放在默认状态：.btn { transition: background-color 0.2s ease, transform 0.15s ease; }
- 多个属性过渡时，用逗号分隔，避免用
all—— 它会让未预期的属性（比如height）也参与动画，导致布局抖动 - 移动端尤其要注意：哪怕只加了
transform，也建议显式写上，别依赖all - 如果按钮有 JS 控制的 class 切换（如
.btn.loading），同样要把transition写在基础类里，否则 class 切换瞬间无过渡
优先用 transform 和 opacity，别碰 top/left/width
transform 和 opacity 能触发 GPU 加速，而 top、left、width 等会触发重排（reflow），在中低端设备上卡顿明显。实测 transform: translateY(-2px) 比 top: -2px 渲染效率高一个数量级。
推荐组合：transition: transform 0.2s ease-out, opacity 0.2s ease-out;
- 缩放用
scale(0.98)比改font-size更轻量 - 阴影变化尽量配合
transform一起动，比如transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); - 避免同时过渡
background-color和border-color—— 颜色渐变更耗性能，选其一即可
:active 伪类过渡要控制时长，0.1–0.15s 最真实
点击反馈需要“即时感”，过渡太长（如 0.3s）会让人觉得按钮响应迟钝；太短（
典型写法：.btn { transition: background-color 0.15s ease, transform 0.1s ease; }.btn:active { background-color: #004085; transform: scale(0.97); }
- 别给
:active单独加transition—— 它只生效一次，且容易和基础过渡冲突 - 如果按钮有文字图标（如带
::before的箭头），记得给图标也加transition，否则会出现“文字不动、背景动”的割裂感 - 安卓 WebView 下
:active可能延迟触发，加touch-action: manipulation;能缓解
transitionend 事件监听容易失效，关键靠 propertyName 过滤
不是所有过渡都会触发 transitionend：属性值没真变（比如 opacity 从 1 → 1）、动画被新 class 中断、或者多个属性过渡时只监听了其中一个，都可能导致监听丢失。
安全写法：el.addEventListener('transitionend', e => { if (e.propertyName === 'transform') { /* 处理缩放完成 */ }});
同时兼容旧版 Safari：el.addEventListener('webkitTransitionEnd', handler);
- 移动端快速连点时，
:active状态可能来不及触发transitionend，建议用pointerdown/pointerup手动控制 class，再监听对应属性 - 如果按钮有加载态切换（如
.btn.loading→.btn.success），过渡结束后需清除临时 class，否则下次点击可能复用旧状态 - 调试时可在 DevTools 的 Styles 面板里勾选 “Show transitions”，实时观察哪些属性正在过渡
真正难的不是写对那几行 CSS，而是判断哪个属性值得动、动多少毫秒才不腻、中断后状态是否干净——这些细节不在线上压测几次，光看文档根本记不住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
