transition在js中不生效，是因为连续修改同一属性被浏览器合并渲染；正确做法是在初始状态声明transition，首次设值后用requestanimationframe延迟设目标值，确保跨帧触发过渡。
transition在JS修改样式后不执行，是因为浏览器跳过了重绘帧
直接写 element.style.opacity = '0.5' 再写 element.style.opacity = '1'，浏览器大概率会合并这两次操作，在单次渲染中直接取最终值——过渡根本没机会启动。这不是 bug，是浏览器的优化行为。触发过渡的前提是：属性值变化必须被拆到至少两个独立的绘制帧里。
用 requestAnimationFrame 强制分帧是最轻量可靠的解法
它把第二次样式写入推迟到下一帧，确保第一次变化已进入渲染流水线，过渡能被正确捕获。比强制读取 offsetHeight 更干净，兼容性也更好（IE10+ 支持）。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 不要在同个 JS 任务里连续改同一属性值
- 第一次设初始态后，立刻调用
requestAnimationFrame，在回调里设目标态 - 确保
transition已在初始 CSS 中声明（不能只写在 hover 或 JS 动态加的 class 里）
element.style.opacity = '0.3';
requestAnimationFrame(() => {
element.style.opacity = '1';
});
为什么不用 offsetHeight 这类强制同步布局的方式
虽然 void element.offsetHeight 能触发重排，但它会让主线程卡住，尤其在动画密集或 DOM 深度大时，容易引发掉帧或卡顿。而 requestAnimationFrame 是浏览器原生调度的渲染时机，不打断布局计算，也不引入额外同步开销。
-
offsetHeight/getComputedStyle属于“同步布局强制读取”，会清空样式和布局队列 - 在 scroll、resize 等高频事件中滥用，极易导致 jank
-
requestAnimationFrame不触发 layout，只承诺“下一次重绘前执行”，更契合过渡机制
容易被忽略的关键点：transition 必须在初始状态就存在
哪怕你用 requestAnimationFrame 分开了两帧，如果 transition 是在第二帧才通过 class 添加或 style 设置进去的，依然不会动。浏览器只对「已有 transition 声明的前提下发生的属性变化」做插值。
- 检查 DevTools 的 Computed 面板，确认
transition-property和transition-duration在第一帧前就已生效 - 避免在 JS 里动态写
element.style.transition = 'opacity 0.3s'—— 它晚于第一次值变更 - 如果必须动态控制过渡参数，用 CSS 自定义属性 +
:is()或 class 切换更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
