transition加了没反应的根本原因是浏览器未感知到属性值的变化过程；需确保属性可过渡、起始与结束值不同、JS操作时强制重排，且transition必须写在初始状态而非伪类中。
直接用 transition 能做大部分交互过渡，但必须满足「属性可变 + 值有差异 + 浏览器能感知变化」三个条件，否则动画根本不会动。
transition 为什么加了却没反应？
常见现象是：鼠标悬停、点击后类名加了，样式也写了，但元素还是“啪”一下切换，没有过渡。根本原因不是 CSS 写错，而是浏览器压根没捕捉到「值的变化过程」。
- 目标属性不支持过渡（比如
display、height: auto、font-size在某些旧引擎下） - 起始值和结束值完全相同（例如都设成
opacity: 1，或 class 切换前后transform都是none） - JS 中连续设置样式没留重排机会：
el.classList.add('active'); el.style.opacity = '1';会被合并渲染，浏览器跳过过渡 - 元素初始状态不可见（
visibility: hidden或opacity: 0且未设transition覆盖）
哪些属性适合 transition？怎么配才顺滑？
只对「可计算、可插值」的属性生效。优先选性能开销低的组合，避免触发布局（layout）或绘制（paint）。
- ✅ 安全高效：
opacity、transform（translate/scale/rotate）、filter - ⚠️ 慎用：
width/height（触发布局）、background-color（触发绘制，但现代浏览器优化较好） - ❌ 不支持：
display、z-index、font-family、content - 推荐写法：
transition: opacity 0.25s ease, transform 0.25s ease;—— 多属性分写比all更可控 - 避免用
ease-in-out做入口动画，首帧加速太慢；改用cubic-bezier(0.25, 0.46, 0.45, 0.94)更自然
JavaScript 触发 transition 的正确姿势
纯 CSS :hover 没问题，但 JS 控制类名/样式时容易失效。关键是在「设新值前强制浏览器读取旧值」，制造重排机会。
- 错误写法：
btn.classList.add('pressed');→ 浏览器可能跳过过渡 - 正确写法（三步）：
① 先加类或设初始样式
② 强制读取布局：void btn.offsetHeight;（或btn.scrollTop）
③ 再设目标样式或加第二类：btn.style.transform = 'scale(0.95)'; - 监听完成用
transitionend，但注意它会为每个过渡属性触发一次，建议加判断：if (e.propertyName === 'transform') { ... } - 需要复位动画？别用
animation: none，而是先移除类，void el.offsetHeight，再加回来
View Transitions API 和 transition 是两回事
别把 document.startViewTransition() 当作 transition 的升级版——它只管「页面级 DOM 替换」的快照过渡，不负责按钮、弹窗等局部交互。混用反而坏事。
-
transition是元素级、声明式、靠 CSS 属性变化驱动 -
startViewTransition()是导航级、命令式、依赖view-transition-name字符串精确配对 - 想让一个按钮点击后带动画切换表单？用
transition+transform就够了；想让路由跳转时商品图平滑飞入？才轮到 View Transitions - 当前仅 Chromium 111+ / Safari 17.4+ 支持
startViewTransition，且必须在用户手势中调用（如click事件），不能在setTimeout或fetch.then里直接用
最常被忽略的一点：transition 不是“加了就动”，它是浏览器在两次样式计算之间自动补帧的结果。任何打断这个流程的操作（比如异步更新、display 切换、CSS 优先级覆盖）都会让动画静默失败。调试时打开 DevTools 的 Rendering 面板，勾选「Paint flashing」，看过渡区域是否真被重绘——没闪，说明根本没进过渡管线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
