如何用CSS transition实现平滑状态切换

作者：袖梨 2026-09-04

transition必须写在基础样式中，不能只放伪类里；需作用于状态变化的元素自身，精准指定可过渡属性，避免使用all；JS触发样式变更时同样依赖基础样式中的transition声明。

transition 必须写在基础样式里，不能只放伪类中

很多人写 button:hover { transition: background-color 0.3s; }，结果动画根本不触发——因为 transition 是定义“从 A 到 B 怎么过渡”的规则，它必须同时存在于起始态（button）和结束态（button:hover）都匹配的声明中。只写在 :hover 里，等于告诉浏览器：“只有鼠标悬停时才开始准备过渡”，但此时属性已经变了，没机会“过渡”了。

正确做法是把 transition 放在基础选择器里：

button {background-color: #007bff;transition: background-color 0.3s ease;}button:hover {background-color: #0056b3;}

transition 要写在状态变化的元素自身上，不是父容器，也不是触发按钮
如果用 JS 切换 class 控制状态（比如 .is-active），同样要把 transition 写在基础 class（如 .menu）里，而不是只写在 .menu.is-active
多个属性要过渡？用逗号分隔：transition: background-color 0.3s, transform 0.2s;

只对实际会变的属性设 transition，别滥用 all

transition: all 1s ease 看起来省事，但容易引发意外动画：比如你没打算动 box-shadow 或 border-radius，但它们也被过渡了，导致视觉干扰或性能抖动。更糟的是，某些属性（如 display、height 从 auto 变具体值）根本无法过渡。

推荐精准写法：

.container {transition: background-color 1s ease,color 1s ease,opacity 0.3s ease;}

查 MDN 可知，只有“可计算且数值型”的 CSS 属性才能过渡，比如 background-color、opacity、transform；display、font-family、width（从 auto 开始）不行
深色模式切换时，只过渡 background-color 和 color 就够了，加 all 没必要
后续扩展样式（比如加了 box-shadow），再单独补上对应过渡项

:active 伪类不适合做 click 后的持续过渡

纯 CSS 的 :active 状态持续时间极短（毫秒级），手指或鼠标一松开就失效。如果你希望点击后背景色缓变并保持几秒，button:active { background: green; } 加 transition 是无效的——动画根本来不及播完。

可靠解法是用 JS 控制 class：

button.addEventListener('click', () => {btn.classList.add('clicked');setTimeout(() => btn.classList.remove('clicked'), 300);});

button {transition: background-color 0.3s ease;}button.clicked {background-color: #28a745;}

别在 click 回调里立刻 remove class，否则 transition 会被中断
setTimeout 时间必须 ≥ transition-duration，否则动画被截断
更健壮的做法是监听 transitionend 事件，但简单场景用 setTimeout 更直接

滚动/JS 触发的样式变更也要靠 CSS transition 补救

JS 直接改 element.style.backgroundColor = 'red'，浏览器默认硬切——这不是 JS 写错了，而是缺少 CSS 过渡声明。只要目标元素有对应 CSS 规则，加上 transition 就能生效。

例如滚动时导航栏变透明：

#nav {background-color: #ede9e0;transition: background-color 0.4s ease;}

JS 里只需：

window.addEventListener('scroll', () => {if (window.scrollY > 10) {nav.style.backgroundColor = '#ede9e000';} else {nav.style.backgroundColor = '#ede9e0';}});