问题所在

transition: all 0.3s ease 是 CSS 中最常见的过渡写法之一，书写方便、覆盖面广。但从渲染性能角度看，这是最昂贵的写法——浏览器需要为元素上每一个可过渡属性维护动画状态，即使其中绝大多数属性根本没有变化。

具体来说，当元素被标记为 transition: all 时，一旦触发 transition，浏览器必须：

• 检查该元素所有 CSS 属性的计算值是否发生变化
• 为每个可能变化的属性计算插值
• 在每一帧重新计算布局、绘制和合成

这在具有数百个 DOM 节点的页面上会显著增加渲染管线的开销。

替换策略

按照元素的功能类别，将 transition: all 拆分为针对性属性：

按钮类 → color + background-color + box-shadow

1/* 替换前 */
2.submit-btn {
3  transition: all 0.3s ease;
4}
5
6/* 替换后 */
7.submit-btn {
8  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
9}

按钮的 hover 效果通常只涉及颜色和阴影变化，三项属性即可覆盖。

卡片类 → transform + box-shadow

1/* 替换前 */
2.post-card {
3  transition: all 0.3s ease;
4}
5
6/* 替换后 */
7.post-card {
8  transition: transform 0.3s ease, box-shadow 0.3s ease;
9}

卡片悬停主要是位移动画和阴影加深，transform 属于合成层属性，性能最优。

菜单/模态类 → opacity + visibility + transform

1/* 替换前 */
2.dropdown-menu {
3  transition: all 0.25s ease;
4}
5
6/* 替换后 */
7.dropdown-menu {
8  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
9}

菜单展开/收起涉及透明度、可见性和位移，精确声明三项即可。

替换统计

对全站 CSS 文件进行了系统性排查和替换：

性能对比

使用 Chrome DevTools Performance 面板测试首页加载和交互：

自动化检测

可在项目 CI 中集成 Stylelint 规则，禁止未来引入 transition: all：

1{
2  "rules": {
3    "declaration-property-value-disallowed-list": {
4      "transition": ["all"]
5    }
6  }
7}

通过配置 declaration-property-value-disallowed-list 规则，当有人提交含 transition: all 的代码时，CI 会自动拦截并提示替换为精确属性。

对于遗留代码中确实需要过渡所有属性的极端场景，可以保留 all 但添加注释说明理由，确保每位开发者都清楚这一性能决策的背景。