主流ui框架推荐hover过渡时长为0.2s–0.3s，纯颜色变化可设0.2s，含缩放或位移应≥0.25s；须避免transition: all、width/height及top/left动画，优先使用opacity+transform组合以保障gpu加速与流畅性。
transition-duration 设太短会导致肉眼卡顿
0.1s 或 0.15s 看似“响应快”，实际人眼难以分辨变化过程，反而显得生硬、跳变。主流 UI 框架（如 Material Design）推荐 hover 过渡在 0.2s–0.3s 区间，兼顾响应感与流畅性。
常见错误是把所有过渡都设成 0.1s，尤其在 background-color + transform 组合时，两个属性动画节奏不一致会放大突兀感。
- 纯颜色变化可压到
0.2s，但加缩放或位移建议 ≥0.25s - 避免写
transition: all 0.1s ease;——all会包含 margin/padding 等不可动画属性，触发无效回退 - 移动端手指操作有延迟，
0.3s反而比0.15s更符合触感预期
opacity + transform 才真平滑，别碰 width/height
用 width 或 height 做过渡动画，每次重排（reflow）都会强制浏览器计算布局，性能掉得明显，尤其在低端安卓机或 iOS Safari 上容易掉帧。
真正能 GPU 加速、零卡顿的组合只有 opacity 和 transform（包括 scale()、translateX()、rotate()）。按钮悬停变色+微缩放，就该这么写：
button {
transition: opacity 0.25s ease, transform 0.25s ease;
}
button:hover {
opacity: 0.95;
transform: scale(1.02);
}
-
background-color虽支持过渡，但部分旧版 Safari 渲染不稳定，建议搭配will-change: background-color或直接换用opacity微调 - 不要用
top/left位移——它触发布局计算；改用transform: translateY() - 如果必须显示/隐藏，用
opacity: 0+visibility: hidden配合transitionend移除 DOM，别只靠display: none
:hover 触发过渡时，伪元素定位不准的根源
涟漪效果里 ::before 总偏移、不跟鼠标点对齐，多数不是 JS 计算错，而是 CSS 中没处理好定位上下文。
关键点：按钮父容器不能有 transform、perspective 或 filter，否则 offsetLeft/offsetTop 返回值失效，JS 算出的 --x/--y 就是错的。
- 检查按钮是否被套在
transform: scale(0.95)的 wrapper 里——这是最常被忽略的干扰源 - JS 中应统一用
getBoundingClientRect()替代offsetLeft/offsetTop，更可靠：const rect = btn.getBoundingClientRect(); const x = e.clientX - rect.left; - CSS 里
::before必须设position: absolute; top: 0; left: 0;，且按钮本身要position: relative
transitionend 监听容易漏掉的三个条件
监听 transitionend 做后续动作（比如启用按钮、清理状态）时，常出现“事件没触发”或“触发多次”，问题不在语法，而在边界条件。
- 过渡属性没变 —— 比如
opacity从1→1，即使写了transition也不会触发事件 - 事件冒泡到父级 —— 必须校验
e.target === button，否则子元素（如图标、span）的过渡也会触发回调 - 浏览器跳过动画 —— Safari 在页面切后台后恢复时，可能直接跳到终态，
transitionend不触发；需加超时兜底：setTimeout(() => { /* fallback */ }, 300)
复杂交互动画里，单靠 transition 很难覆盖所有路径，真正平滑的体验往往藏在这些细节点里——比如一个按钮 hover 后的 0.02s 延迟入场，或者点击后 50ms 内禁用重复触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
