transition类单独使用无效，因其仅定义“如何过渡”，不触发状态变化；必须配合起点和终点样式（如opacity-0→opacity-100）及hover/focus/JS触发才生效。
transition类单独加没动画，是因为它只管“怎么变”，不管“变不变”
加了 transition 或 transition-all 却没反应，不是 Tailwind 失效，而是你只设了过渡参数，没提供“起点和终点”。浏览器需要两个明确样式状态才能插值——比如从 opacity-0 到 opacity-100，或从默认缩放值到 hover:scale-110。
- ✅ 正确写法：
transition-opacity duration-300 hover:opacity-100（基础态 + 悬停态） - ❌ 错误写法：
transition-all单独挂在一个div上，没有任何 hover/focus/JS 类切换 - JS 控制时，确保切换的是可动画属性：用
opacity-0→opacity-100，别用hidden→block（hidden是display: none，不可过渡）
哪些 CSS 属性真能平滑过渡？别碰 height、display、text-decoration
Tailwind 默认的 transition 只覆盖颜色、边框、背景等安全项；想动得顺，必须选对属性。GPU 加速、无重排、浏览器优化好的只有 transform 和 opacity。
- ✅ 推荐：
transition-transform+hover:scale-110，或transition-opacity+ JS 切换opacity-0/opacity-100 - ⚠️ 避免：
transition-width、transition-height（v3.0+ 已默认禁用），height: auto无法过渡，display根本不支持 - 下划线动画不能靠
text-underline：它对应text-decoration，该属性不支持过渡；改用border-bottom或伪元素 +scaleX - 菜单展开别用
h-0→h-auto：改用max-h-0→max-h-96，并配overflow-hidden
duration 和 ease 必须写在常态类里，否则离开时直接跳回
duration-300 和 ease-in-out 这类类名，必须和 transition- 类共存于基础元素上，不能只放在 hover: 或 active: 后面——否则鼠标移出瞬间会立刻切回原状，毫无过渡。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- ✅ 正确：
transition-transform duration-300 ease-in-out hover:scale-105 - ❌ 错误：
transition-transform hover:scale-105 hover:duration-300（移出时无动画） -
duration-类单独写无效：duration-300没配任何transition-类，CSS 中不会生成transition-duration - 移动端慎用纯
hover:：iOS Safari 对 hover 支持延迟且不稳定；按钮反馈优先用active:scale-95，下拉菜单改用group-hover:包裹触发区
transition-all 是个陷阱：它会连 box-shadow、filter 一起动
transition-all 看似省事，实际容易引发卡顿或意外抖动——比如悬停时同时过渡 box-shadow、filter、background-color，其中某些属性重绘开销大，或触发非预期渲染行为。
立即学习“前端免费学习笔记（深入）”；
- ✅ 显式声明目标属性更稳：
transition-transform duration-200或transition-opacity duration-150 - 菜单展开用
transition-max-h（需自定义）比transition-all更精准，避免滚动条闪动 - JS 动态更新时，别反复读取
offsetHeight或切一堆w-1/4/w-1/2类模拟宽度变化；改用style.transform = 'scaleX(0.7)'直接走合成层 - 长时动画（>500ms）可加
will-change: transform提示浏览器优化，但别滥用——它本身有内存开销
