手风琴/下拉菜单展开收起时，用迪士尼 12 原则和 CSS…

适用于手风琴、可折叠面板、下拉菜单等 expand/collapse 元素的展开与收起动画。

适用场景

解决思路

1. 应用挤压与拉伸：内容折叠时轻微压缩、展开时轻微拉伸；点击时让触发头部做挤压反馈。
2. 应用预备动作：展开前让头部短暂下压；箭头在内容显示前开始旋转。
3. 应用舞台调度：让展开区域清晰可见；可调暗其他手风琴项；激活头部保持高亮。
4. 应用顺画法与姿势到姿势：定义明确状态 collapsed、expanding、expanded、collapsing；用姿势到姿势实现可控、可逆动画。
5. 应用跟随与重叠动作：容器先展开，内容在 50-100ms 后淡入；箭头旋转可过冲后回稳。
6. 应用缓入缓出：展开用 ease-out（快起慢收），折叠用 ease-in（慢起快收）；cubic-bezier(0.4, 0, 0.2, 1) 效果良好。
7. 应用弧线：箭头旋转沿弧线缓动；内容项可沿轻微弧线进入，而不是直线下落。
8. 应用次要动作：内容显示为主动作时，箭头旋转为次要动作，相邻手风琴可折叠为第三级动作。
9. 展开/折叠时间使用 250-350ms。
10. 箭头旋转时间使用 200-250ms。
11. 内容淡入时间使用 150-200ms。
12. 内部项错开时间使用 30-50ms。
13. 点击反馈时间使用 50ms。
14. 应用夸张：重要展开可用更戏剧化时间；FAQ 手风琴可用更轻快动画；匹配内容重要程度。
15. 应用扎实绘图：保持头部高度一致；高度动画期间内容不应抖动；使用正确的高度技术。
16. 应用吸引力：平滑手风琴更精致；高度动画卡顿会显得损坏；值得为正确展开/折叠投入技术实现。
17. 对 .accordion-content 设置 display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease-out。
18. 对 .accordion-content.open 设置 grid-template-rows: 1fr。
19. 对 .accordion-inner 设置 overflow: hidden。
20. 对 .accordion-chevron 设置 transition: transform 250ms ease-out。
21. 对 .accordion-header[aria-expanded="true"] .accordion-chevron 设置 transform: rotate(180deg)。
22. 备选 max-height 方案：对 .dropdown-content 设置 max-height: 0; overflow: hidden; transition: max-height 300ms ease-out。
23. 备选 max-height 方案：对 .dropdown-content.open 设置 max-height: 500px（需大于内容高度）。
24. 使用 grid-template-rows 实现平滑高度。
25. 使用 max-height 作为更简单但不够精确的替代。
26. 使用 transform 旋转箭头。
27. 使用 opacity 实现内容淡入。
28. 在过渡期间使用 overflow: hidden。

适用边界 · 注意事项

• 当用户或系统偏好减少动态效果（prefers-reduced-motion）时，不适用这些动画过渡。
• 当内容高度完全动态且无法接受 max-height 估算或 grid-template-rows 兼容限制时，不应直接套用示例实现。
• 当项目已有统一动画规范或组件库时，不应逐条覆盖其参数。