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';
}
});
- transition 必须写在
#nav的 CSS 规则里，不能只靠 JS 设置内联 style - 颜色值要用兼容格式：十六进制带 alpha（
#rrggbbaa）或 rgba()，否则过渡可能失败 - 如果用 class 切换（如
.scrolled），同样要把transition写在基础 class 中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
