transition需配合属性值实际变化才生效，如opacity或transform；display和visibility不支持过渡；应明确指定transition-property而非all；timing-function控制运动节奏而非速度；JS触发时需避免强制重排。
transition 属性必须配合可变的 CSS 属性才生效
直接写 transition: all 0.3s 但没改任何样式，过渡不会触发。浏览器只在「属性值实际变化」时启动过渡，比如从 opacity: 1 变成 opacity: 0，或 transform: scale(1) 变成 transform: scale(1.2)。
常见失效场景：
- 对
display切换（display: none↔display: block）加 transition —— 无效，display不支持过渡 - 用
visibility控制显隐并加 transition —— 也不行，visibility是离散值，没有中间状态 - 写了
transition但没在 :hover/:focus/JS 中真正修改目标属性 —— 白写
transition-property 推荐明确指定，别用 all
all 看似省事，但容易引发意外动画，比如字体颜色、边框粗细、阴影等细微变化全被过渡，影响性能和体验。
更稳妥的做法是只过渡真正需要的属性：
立即学习“前端免费学习笔记（深入）”；
- 视觉位移类：用
transform（推荐），而不是left/top - 透明度：用
opacity - 背景色：用
background-color（注意仅支持十六进制、rgb、hsl 等可插值格式） - 避免过渡
height或width—— 会触发重排，卡顿明显
transition-timing-function 决定“怎么动”，不是“动多快”
transition-duration 控制总时长，而 transition-timing-function 控制运动节奏。默认的 ease 是先慢后快再慢，常显得不够干脆。
实用选择：
-
ease-in-out：更平滑的起止，适合按钮悬停 -
linear：匀速，适合 loading 动画或进度条 -
cubic-bezier(0.25, 0.46, 0.45, 0.94)：类似 iOS 弹性回弹，适合模态框入场 -
steps(4, end)：阶梯式过渡，适合帧动画（如 sprite 切换）
JS 触发过渡时要注意重排时机
用 JS 改完样式后立刻读取 offsetTop/scrollHeight 等布局属性，可能让浏览器强制同步计算，打断过渡链。
安全写法是加一层异步延迟，确保样式变更已提交到渲染队列：
element.classList.add('active');
// 确保 class 已应用，再触发过渡
void element.offsetWidth; // 强制重排，但不阻塞
element.classList.add('animate');
或者用 requestAnimationFrame 更精准：
element.classList.add('active');
requestAnimationFrame(() => {
element.classList.add('animate');
});
过渡真正难的不是写法，而是判断哪些属性值得动、什么时候该用 transform 而不是 top、以及 JS 批量操作时如何不打断渲染流水线。 
