transition 必须写在初始样式中以监听状态变化，仅对可插值数值属性生效，简写会重置子属性，js触发需确保属性值有效且避免帧合并。
transition 不是“加了就动”，而是需要明确触发条件 + 可过渡属性 + 合理时序控制，否则只会静默失效。
transition 属性必须写在「状态变化前」的元素上
很多人把 transition 写在 :hover 或动画结束态里，结果毫无反应。它必须定义在元素的**初始样式块中**，作为“监听器”存在。
- ✅ 正确：
.btn { background-color: #007bff; transition: background-color 0.2s ease; } .btn:hover { background-color: #0056b3; } - ❌ 错误：
.btn:hover { background-color: #0056b3; transition: background-color 0.2s ease; }（hover 时才注册，已来不及过渡） - ⚠️ 注意：如果初始状态没设
background-color（比如靠继承或 unset），浏览器可能无法计算起始值，导致过渡跳变
不是所有 CSS 属性都支持 transition
transition 只对**可计算、可插值**的数值型属性生效。颜色、尺寸、透明度、位移等可以；display、z-index、font-family 这类离散型属性无法平滑过渡。
- ✅ 支持：
color、opacity、transform、width、margin、background-color（需同类型，如 hex ↔ rgb） - ❌ 不支持：
display: none → block、height: auto（auto 无法插值）、visibility（只有 visible/hidden 两个状态） - ? 替代方案：用
max-height模拟 height 过渡；用opacity+pointer-events替代visibility
简写和拆分写法的坑：多个属性过渡要小心顺序和覆盖
transition 简写会**重置所有子属性**，包括未显式声明的部分（比如 transition-delay 会被设为 0s）。
- ⚠️ 危险组合：
transition: all 0.3s;→ 会过渡所有属性，包括你没想动的box-shadow或border，造成意外抖动 - ✅ 推荐：
transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); - ? 拆分写法更可控：
transition-property: background-color, transform;+transition-duration: 0.2s, 0.2s;+transition-timing-function: ease, cubic-bezier(...);
滚动/JS 动态触发时，transition 失效的常见原因
用 JavaScript 修改 style.backgroundColor 或 class 后没过渡，通常不是 transition 本身的问题，而是 DOM 更新时机或属性冲突。
- ✅ 必须确保 JS 修改的是**已声明可过渡的属性**，且新旧值都是有效颜色（避免
""或transparent与非 transparent 混用） - ⚠️ 常见陷阱：JS 先删 class 再加 class，中间帧被浏览器合并，导致过渡丢失 → 改用
getComputedStyle强制重排，或加setTimeout(() => ..., 0) - ? 更稳做法：用
transform替代top/left（触发 GPU 加速且无重排）；用opacity替代visibility
transition 可靠工作的关键，是理解它不主动“驱动”变化，只响应“可测量的数值变更”。任何脱离这个前提的写法，都会在某个浏览器或交互路径下静默失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
