17370845950

transition: all 仅对可动画的CSS属性生效，如color、opacity、transform等，但display、z-index等不可插值属性无效；显式声明关键属性更安全可控。

transition: all 会过渡哪些属性

transition: all 并不是真的“所有 CSS 属性”都会被过渡，它只对**可动画的属性**生效。比如 display、z-index、content 这类不可插值的属性，即使写了 all 也不会产生过渡效果。浏览器内部有一份可过渡属性白名单，像 color、opacity、transform、width、height、background-color 等都支持；但 font-size 虽然可过渡，却可能因字体加载或 subpixel 渲染导致视觉跳变。

用 transition: all 时最常踩的坑

看似方便，实际容易引发意外动画：

• transition: all 0.3s 会让所有后续样式变更（包括 JS 动态加 class、伪元素内容变化、甚至 outline 或 box-shadow 的微小改动）全都带上过渡，调试时难以定位源头
• 某些属性过渡不自然：比如 height: 0 → auto 无法过渡，必须配合 max-height 或 transform: scaleY()
• 移动端上 all 可能触发不必要的重排（reflow），尤其涉及 width/height 时，造成卡顿
• 如果父元素有 will-change: transform，而子元素用 all 过渡 left 和 top，可能因层叠上下文冲突导致动画撕裂

更可控的替代写法：明确列出关键属性

比起 all，显式声明要过渡的属性更安全、意图更清晰，也利于性能优化：

button {
  background-color: #ccc;
  color: #333;
  transform: scale(1);
  transition: background-color 0.2s, color 0.2s, transform 0.2s ease-out;
}

button:hover {
  background-color: #007bff;
  color: white;
  transform: scale(1.05);
}

这样写的好处：

• 避免无关属性被意外带动画（如 border-color 在 hover 里没改，就不会参与过渡）
• 不同属性可用不同持续时间或缓动函数，比如 transform 用 ease-out，opacity 用 linear
• 便于后续维护：谁看代码都知道哪些状态变化是设计过的动画

需要“全量响应变化”时的务实方案

真有场景需覆盖多数视觉变化（比如组件主题切换、暗色模式切换），不建议依赖 all，而是：

• 用 CSS 自定义属性统一控制可变部分，例如 --bg-primary、--text-emphasis，再对这些变量做 transition
• 对结构类变化（显示/隐藏、尺寸伸缩）单独用 transform + opacity 组合，避开重排
• 用 getComputedStyle(el).getPropertyValue('--my-var') 配合 JS 控制过渡时机，比纯 CSS all 更可靠

真正难的不是让所有东西动起来，而是让该动的动得准、不该动的不动——all 看似省事，反而掩盖了哪些变化值得被用户感知。