background-color 过渡不生效的常见原因包括：颜色格式不一致（如transparent与rgba不可插值）、误用transition: all、JS直接赋值覆盖CSS过渡、未在transition中声明CSS变量名；应统一使用rgb/十六进制色值，显式声明transition属性及时长，并优先通过class切换触发过渡。
background-color 过渡不生效的常见原因
直接给 background-color 加 transition 却没效果，大概率是以下几种情况之一：
• 元素初始或目标色值用了不支持过渡的格式（比如 transparent 与 rgba(0,0,0,0) 虽然视觉相同，但浏览器不认为它们可插值）
• 没有明确指定要过渡的属性，写成了 transition: all .3s，但某些浏览器对 all 的兼容行为不一致
• 颜色在 JS 中通过 element.style.backgroundColor = 'red' 动态赋值，但旧值是 CSS 类里定义的，触发时机导致过渡被跳过
• 使用了 CSS 自定义属性（--bg-color），但没在 transition 中声明该变量名，而只写了 background-color
必须显式声明 transition 属性和时长
不要依赖 all，也不要在不同状态间混用颜色格式。确保：
• 初始色和目标色都用 rgb()、rgba() 或十六进制（#rrggbb / #rgb）
• 显式写出属性名和时间，例如：transition: background-color 0.3s ease;
• 如果用 CSS 类切换，两个类都要定义 background-color，且不能有一个是 inherit 或 unset
.btn {
background-color: #4a6fa5;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #35527e;
}
JS 动态改色时如何触发过渡
用 JS 直接操作 style.backgroundColor 会覆盖 CSS 中的过渡声明，导致“瞬切”。正确做法是：
• 改用 class 切换（推荐）
• 或先强制重排，再赋新值（hack 方式，慎用）
• 不要用 setTimeout 模拟延迟，不可靠
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- ✅ 推荐：添加/移除预设类名，让 CSS 控制过渡
- ⚠️ 可行但脆弱：在赋值前读取
offsetHeight强制触发重排 - ❌ 错误：连续两次
element.style.backgroundColor = ...，中间无重排
使用 CSS 变量 + transition 的注意事项
原生 CSS 变量本身不支持过渡，必须配合 background-color 属性一起用：
• 在 :root 或元素上定义 --bg: #4a6fa5
• 元素的 background-color 写成 var(--bg)
• transition 仍作用于 background-color，不是 --bg
• 修改变量值时，只要 background-color 的计算结果变了，过渡就生效
立即学习“前端免费学习笔记（深入）”；
:root {
--primary: #4a6fa5;
--hover: #35527e;
}
.card {
background-color: var(--primary);
transition: background-color 0.3s ease;
}
.card.active {
background-color: var(--hover);
}
CSS 的 background-color 过渡看着简单，实际卡点常出在颜色格式一致性、JS 赋值时机、以及自定义变量的间接性上——这些地方一错，动画就消失，而且不容易定位。 
