transition加了没反应是因为仅对可计算可插值属性（如opacity、transform）生效，且必须在初始状态声明、触发实际值变化；display、height:auto等不可插值属性不支持过渡，伪类中写transition或漏设起止值也会失效。
transition 不是“加了就能动”，它只响应可计算的属性值变化，且必须有明确的触发时机和合法的起止状态。
transition 为什么加了没反应
常见错误现象包括：鼠标悬停没变化、JS 切 class 后动画一闪而过、或干脆完全不动。
- 属性本身不可过渡——比如
display、z-index、font-family等，浏览器不支持插值计算 - 起始/结束状态没显式声明——例如只写
.box:hover { opacity: 0; }，但没在基础样式里设opacity: 1，浏览器可能取默认值或继承值，导致过渡失效 - 触发时没发生“重排+重绘”——JS 直接改
style.opacity后立刻改回，中间没让浏览器有机会识别状态差；需用void element.offsetWidth强制同步布局 - 父容器用了
transform或will-change却没配contain: layout paint，导致子元素 transition 被截断（尤其在 iOS Safari）
transition-property 应该写哪些值
写太宽会拖慢性能，写太窄又漏掉关键变化。核心原则：只过渡能 GPU 加速、不影响布局的属性。
- 安全首选：
transform和opacity，它们不触发重排，浏览器自动走合成层 - 谨慎使用：
width、height、margin、padding—— 改它们会触发重排，动画卡顿明显 - 绝对避免：
all，它会把color、border-color、font-size全部拉进来，一次 hover 可能意外过渡十几个属性 - 需要高度展开？用
max-height替代height，并设初始值为0、结束值为足够大的像素数（如500px），同时加overflow: hidden
transition-duration 和 timing-function 怎么配
时长不是越长越好，缓动也不是 ease 万能。真实交互中，人眼对 200ms 内的变化最敏感，超过 300ms 就容易感知延迟。
- 微交互（按钮 hover、开关切换）：用
0.15s – 0.25s，搭配cubic-bezier(0.4, 0, 0.2, 1)（即ease-in-out的增强版） - 页面入场/退出：用
0.3s – 0.4s，起始加一点延迟（transition-delay: 0.05s）可提升节奏感 - 避免
linear用于交互类动画——它缺乏加速/减速，看起来像机械滑动 - 多个属性不同步？分开写：例如
transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
JS 控制 transition 必须绕开的坑
直接操作 element.style 很容易让 transition 失效，尤其在单页应用中替换内容时。
- 不要用
setTimeout硬等时间移 class——系统动画缩放、GPU 未就绪、CSS 覆盖都会导致偏差 - 监听
transitionend时，务必校验e.target === element和e.propertyName，否则子元素冒泡会误触发 - 替换 DOM 后，先清空旧动画类，再加新类，然后立刻读取
element.offsetHeight强制重排，再设目标样式 - iOS Safari 对
transform过渡更敏感，建议加will-change: transform和backface-visibility: hidden提前升层
真正难的不是写对一行 transition，而是判断某个交互是否适合用它——状态是否只有两个、变化是否可预测、属性是否可硬件加速。一旦条件不满足，就得切到 @keyframes 或 requestAnimationFrame。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
