mcpField
A
accordions-dropdowns

accordions-dropdowns

github.com/dylantarre设计与 UI132506 次安装43 周前更新
代码仓库

关于 accordions-dropdowns

这项设计技能将迪士尼 12 条动画原则用于手风琴和下拉交互，涵盖状态、节奏、视觉反馈与 CSS 技法，适合界面设计和开发工作。

主要功能

  1. 01将 12 条动画原则用于展开与收起
  2. 02定义动效状态和过渡时长
  3. 03协调内容、箭头与相邻项动画
  4. 04提供高度和透明度的 CSS 属性建议

适用场景

  1. 01设计带动画的 FAQ 手风琴
  2. 02为下拉交互添加反馈
  3. 03减少内容展开时的视觉抖动

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill accordions-dropdowns

安装后在 Claude Code 中输入/accordions-dropdowns确认已加载。

详细介绍

Accordion 和 Dropdown 动画原则

将迪士尼的 12 条原则应用于展开/折叠元素，实现流畅且信息明确的展现效果。

应用于 Accordion 的原则

1. 挤压与拉伸

内容折叠时可以略微压缩，展开时可以拉伸。点击时，触发区域的标题可以挤压一下以提供反馈。

2. 预备动作

展开前，标题短暂下压。内容显示前，Chevron 开始旋转。营造期待感。

3. 演出布局

展开的区域应清晰可见。可以考虑调暗 Accordion 中的其他项目。活动标题保持高亮。

4. 连续动作与关键帧动作

定义清晰的状态：已折叠、展开中、已展开、折叠中。通过关键帧动作实现可控且可逆的动画。

5. 跟随与重叠动作

容器先展开，内容在 50-100ms 后淡入。Chevron 旋转时可以略微过冲，然后稳定下来，营造层次感。

6. 缓入与缓出

展开：使用 ease-out（快速开始，平滑结束）。折叠：使用 ease-in（缓慢开始，快速结束）。cubic-bezier(0.4, 0, 0.2, 1) 效果不错。

7. 弧线

Chevron 旋转时应沿弧线平滑过渡。内容项进入时可以略微沿弧线路径移动，而不是直线向下。

8. 次要动作

内容显示时（主要动作），Chevron 旋转（次要动作），同级 Accordion 可能会折叠（第三动作）。

9. 时间安排
  • 展开/折叠：250-350ms
  • Chevron 旋转：200-250ms
  • 内容淡入：150-200ms
  • 内部项目依次延迟：30-50ms
  • 点击反馈：50ms
10. 夸张

重要内容的展现可以采用更明显的时间变化。FAQ Accordion 可以采用更利落的动画。根据内容的重要性调整。

11. 扎实绘制

保持标题高度一致。高度动画期间，内容不应抖动。使用恰当的高度处理技巧。

12. 吸引力

流畅的 Accordion 显得精致。卡顿的高度动画让人感觉功能损坏。为实现恰当的展开/折叠效果，投入必要的技术成本是值得的。

CSS 实现

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease-out;
}

.accordion-content.open {
  grid-template-rows: 1fr;
}

.accordion-inner {
  overflow: hidden;
}

.accordion-chevron {
  transition: transform 250ms ease-out;
}

.accordion-header[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
}

/* Alternative: animate max-height */
.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
}

.dropdown-content.open {
  max-height: 500px; /* larger than content */
}

关键属性

  • grid-template-rows：平滑控制高度
  • max-height：更简单，但不够精确
  • transform：旋转 Chevron
  • opacity：内容淡入
  • overflow：过渡期间隐藏溢出内容

评论

支持 Markdown