transition 不生效的根本原因是未触发可插值属性的实际值变化；必须写在起始状态而非伪类中，避免使用 display、height:auto 等不可过渡属性，优先选用 transform 和 opacity 并显式声明初始值。
transition不是动画，也不是 JS 控制的动效——它是 CSS 里最轻量、最可控的视觉响应机制。想“做出来就动”，得先搞清它只响应**属性值变化**，而不是“播放一段动作”。
为什么加了 transition 却没反应？
最常见的原因是：没有触发「属性值的实际变更」。比如：hover 时没改 color 或 transform，或者改的是不支持过渡的属性（如 display、height 从 auto 变更）。
- 只对「可计算、可插值」的 CSS 属性生效（
opacity、transform、background-color可以；display、font-family、z-index不行） - 必须写在「起始状态」上，不是 hover 里——否则第一次 hover 没过渡，第二次才开始有
- 别用
transition: all 0.3s，它会把所有属性都强行过渡，包括你没意识到在变的（比如box-shadow的隐式重绘）
transition-property 该写哪些值？
明确指定比 all 更安全，也更容易调试。优先选语义清晰、性能开销小的属性：
-
transform和opacity是 GPU 加速的，流畅且不触发布局重排 -
background-color、color可过渡，但颜色空间插值可能意外（比如#fff→hsl(240,100%,50%)会走 HSL 路径） - 避免
width/height，尤其当值为auto时，浏览器无法计算中间状态
推荐写法：transition: transform 0.2s ease, opacity 0.2s ease;
怎么让过渡“卡点”响应鼠标操作？
用户交互不是等动画播完才允许下一次操作——默认 transition 会排队、覆盖、甚至中断。要让它跟手，关键在控制时机和状态：
- 用
:hover+transition最简单，但仅限悬停；需要点击切换请配合:focus-within或 JS 切换 class - 如果 JS 动态改样式（比如
element.style.opacity = '0.5'），记得先移除旧 class 再加新 class，避免 transition 未清除导致跳帧 - 想取消正在运行的过渡？直接设
transition: none然后改值，再恢复原 transition —— 但更稳妥的做法是用getComputedStyle判断当前是否在动，或统一用transform避免布局抖动
移动端点透、延迟、闪一下？检查这三点
在 iOS Safari 或安卓 Chrome 上，transition 常表现异常，不是代码错，而是渲染链路被干扰：
- 缺
will-change: transform（尤其做translateZ(0)或scale时），iOS 可能降帧或首帧卡顿 - 父容器有
overflow: hidden且子元素用transform移出范围，某些安卓版本会触发重绘闪烁 - 用
touchstart触发 class 切换时，iOS 有 300ms 延迟；加cursor: pointer或touch-action: manipulation可缓解
过渡本身很简单，难的是判断「此刻该不该动」「动的时候有没有抢资源」「动完状态还对不对」。真正卡住人的从来不是语法，而是浏览器如何调度样式计算、布局、绘制和合成——盯着 transform 和 opacity 两条路走，八成不会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
