SVG手风琴动画核心是路径d属性插值与CSS/JS协同控制：1.起止状态path的d命令结构需一致（如均为M-L-L）；2.用transition:d或实现平滑变形；3.内容区配合transform:scaleY()同步伸缩，确保视觉统一。
用 SVG 实现手风琴折叠展开动画，核心是结合 SVG 路径变换（d 属性插值） 与 CSS 或 JavaScript 控制的过渡/动画逻辑，而非依赖外部库。关键在于让每个“面板”对应的矢量图形（如箭头、线条或自定义图标）在展开/收起时平滑变形。
1. 矢量图标需用
SVG 手风琴动画最可靠的方式是让“向上箭头”和“向下箭头”使用同一组控制点数量、命令顺序相同的 d 字符串（即“可插值路径”）。例如：
<!-- 收起状态：向下箭头 --> <path d="M5 8 L11 14 L17 8"></path><!-- 展开状态：向上箭头 --><p><path d="M5 14 L11 8 L17 14"></path></p>
这两条路径都含 3 个点、2 条线段（M L L），浏览器可直接对坐标做线性插值。若混用 C（贝塞尔）和 L，或点数不等，动画会失效或跳变。
2. 用 CSS transition 驱动 d 属性变化（需配合 animate 或 JS 切换）
纯 CSS 无法直接监听点击并切换 d，所以常用 JS 控制 class，再由 CSS 过渡实现动画：
- 给
transition: d 0.3s ease（现代浏览器支持，Chrome/Firefox/Edge 100+） - JS 点击时切换元素 class，如
accordion__icon--expanded - 在 CSS 中为不同 class 定义不同的
d值（用@keyframes不必要，直接用 class 切换更轻量）
3. 面板内容区域用 transform: scaleY() + overflow: hidden 实现矢量协同动画
手风琴不只是图标动，内容区也要伸缩。SVG 图标可随父容器缩放，但更推荐分离控制：
- 内容区用普通 HTML +
max-height或transform: scaleY()动画（后者性能更好） - SVG 图标放在独立
容器中，通过 JS 同步更新其d属性或 class - 这样图标形变与内容伸缩节奏一致，视觉上更“一体”
4. 进阶：用
如果追求零 JS，可用 SVG 原生动画标签，配合 begin 触发：
<svg viewbox="0 0 24 24"><path id="arrow" d="M5 8 L11 14 L17 8"><animate attributename="d" values="M5 8 L11 14 L17 8; M5 14 L11 8 L17 14" dur="0.3s" fill="freeze" begin="click"></animate></path></svg>
注意：begin="click" 仅在 SVG 作为内联元素（非 img 引用）时生效；多次点击需用 restart="whenNotActive" 避免队列堆积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
