最常用轻量的图标过渡方式是直接对或元素的color、font-size、transform等可动画属性用CSS transition实现；禁用display切换，推荐opacity+transform替代，SVG优先用fill/stroke，字体图标需明确初始值。
用 CSS transition 实现图标颜色/大小变化
图标过渡效果最常用、最轻量的方式就是直接对 <i></i> 或 <svg></svg> 元素的属性做 CSS 过渡。前提是这些属性本身支持动画（比如 color、font-size、transform、opacity），且你用了类切换或伪类触发状态变化。
常见错误是给 display: none ↔ block 加 transition——这不会动，因为 display 不是可过渡属性。
- 推荐写法：用
opacity+transform替代display - SVG 图标优先用
fill和stroke做颜色过渡，别依赖 background-image - 如果图标来自字体（如 Font Awesome），确保
font-size和color有明确初始值和目标值，否则过渡可能不生效
.icon {
color: #666;
transition: color 0.2s ease, transform 0.2s ease;
}
.icon:hover {
color: #007bff;
transform: scale(1.1);
}SVG 内联路径的 stroke-dasharray 动画
当需要“绘制感”图标动画（比如勾选图标一笔画出、箭头描边浮现），核心是 stroke-dasharray 和 stroke-dashoffset 配合 @keyframes。这个方法只适用于内联 SVG，且路径必须有明确的 stroke 和 fill: none。
容易踩的坑：没用 getTotalLength() 计算真实路径长度，而是硬写 dasharray: 100，结果动画卡顿或不完整。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须在 JS 中先获取路径长度：
const len = pathEl.getTotalLength(); - CSS 中设
stroke-dasharray: len;和stroke-dashoffset: len;，再动画 offset 到 0 - IE 不支持
getTotalLength()，如需兼容得降级为固定值或避开该动效
/* CSS */
.path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.4s ease;
}
.path.drawn {
stroke-dashoffset: 0;
}React/Vue 中图标组件的 enter/leave 过渡封装
框架里切图标（比如加载中 → 成功 → 失败）时，不能只靠 CSS 类切换，得用框架原生过渡机制，否则 DOM 节点卸载太快，动画根本来不及播。
Vue 用 <transition></transition> 包裹图标组件，React 推荐 framer-motion 或 react-transition-group；手写 useEffect + setTimeout 控制显隐很容易漏掉清理，导致内存泄漏。
- Vue 示例中，
enter-active-class必须含transition声明，否则无效果 - React 若用
motion.i，注意initial/animate的值要和真实 DOM 属性对齐（比如scale对应transform: scale()） - 避免在图标组件内部用
useState+setTimeout模拟过渡，状态更新和样式应用不同步
图标过渡卡顿？检查 will-change 和图层合成
动画掉帧、闪烁、边缘锯齿，大概率不是代码逻辑问题，而是浏览器没把图标元素提升为独立图层。尤其在频繁缩放、旋转时，transform 动画若没触发硬件加速，CPU 渲染压力会明显上升。
简单加 will-change: transform 并不能解决问题，反而可能引发内存占用升高；真正有效的是用 transform: translateZ(0) 或 translate3d(0, 0, 0) 强制创建合成层。
- 只对需要动效的图标加，别全局写
* { will-change: transform } - 移动端 Safari 对
will-change支持不稳定，优先用translateZ(0) - 用 Chrome DevTools 的 “Layers” 面板确认图标是否已成独立图层，而不是和文字挤在同一层里渲染
实际项目里，80% 的图标过渡需求用第一种方式就能解决；剩下那些“绘制感”或状态切换场景，才需要深入 SVG 路径或框架生命周期。别一上来就堆 JS 动画库——多数时候，是 CSS 层面的细节没抠准。
