accordions-dropdowns

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Accordion & Dropdown Animation Principles

手风琴与下拉菜单动画原则

Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.

将迪士尼的12条动画原则应用于展开/折叠元素，实现流畅且直观的显示效果。

Principles Applied to Accordions

应用于手风琴组件的原则

1. Squash & Stretch

1. 挤压与拉伸

Content can slightly compress as it collapses, stretch as it expands. Trigger header can squash on click feedback.

内容折叠时可轻微压缩，展开时可适当拉伸。点击触发的头部可添加挤压效果作为反馈。

2. Anticipation

2. 预备动作

Before expanding, header briefly depresses. Chevron starts rotation before content reveals. Builds expectation.

展开前，头部可短暂向下凹陷。Chevron图标在内容显示前开始旋转，建立用户预期。

3. Staging

3. 舞台呈现

Expanded section should be clearly visible. Consider dimming other accordion items. Active header stays highlighted.

展开的区域应清晰可见。可考虑调暗其他手风琴项，保持激活状态的头部高亮。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画

Define clear states: collapsed, expanding, expanded, collapsing. Pose-to-pose for controlled, reversible animations.

定义清晰的状态：折叠、展开中、展开、折叠中。使用关键帧动画实现可控、可逆转的效果。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作

Container expands first, content fades in 50-100ms later. Chevron rotation can overshoot and settle. Creates depth.

容器先展开，内容在50-100毫秒后淡入。Chevron旋转可略微过度后再归位，营造层次感。

6. Ease In & Ease Out

6. 缓入缓出

Expand:

ease-out

(fast start, smooth finish). Collapse:

ease-in

(slow start, fast finish).

cubic-bezier(0.4, 0, 0.2, 1)

works well.

展开：使用

ease-out

（快速启动，平滑收尾）。折叠：使用

ease-in

（缓慢启动，快速收尾）。

cubic-bezier(0.4, 0, 0.2, 1)

是不错的选择。

7. Arcs

7. 弧线运动

Chevron rotation should ease through the arc. Content items can enter with slight arc paths rather than straight down.

Chevron的旋转应沿弧线平滑过渡。内容项可沿轻微弧线进入，而非垂直下落。

8. Secondary Action

8. 次要动作

While content reveals (primary), chevron rotates (secondary), sibling accordions may collapse (tertiary).

内容显示（主要动作）的同时，Chevron旋转（次要动作），其他手风琴项可能折叠（ tertiary动作）。

9. Timing

9. 时长控制

Expand/collapse: 250-350ms
Chevron rotation: 200-250ms
Content fade: 150-200ms
Stagger internal items: 30-50ms
Click feedback: 50ms

展开/折叠：250-350毫秒
Chevron旋转：200-250毫秒
内容淡入：150-200毫秒
内部元素错开动画：30-50毫秒
点击反馈：50毫秒

10. Exaggeration

10. 夸张表现

Important reveals can use more dramatic timing. FAQ accordions can have snappier animations. Match content importance.

重要内容的显示可使用更具戏剧性的时长。FAQ手风琴可采用更明快的动画，与内容重要性匹配。

11. Solid Drawing

11. 扎实绘制

Maintain consistent header heights. Content should not jitter during height animation. Use proper height techniques.

保持头部高度一致。内容在高度动画过程中不应抖动，使用正确的高度处理技巧。

12. Appeal

12. 吸引力

Smooth accordions feel polished. Janky height animations feel broken. Proper expand/collapse is worth the technical investment.

流畅的手风琴组件显得精致。卡顿的高度动画会显得劣质。为实现流畅的展开/折叠效果，值得投入技术成本。

CSS Implementation

CSS实现

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 */
}

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 */
}

Key Properties

关键属性

```
grid-template-rows
```
: smooth height
```
max-height
```
: simpler but less precise
```
transform
```
: rotate chevrons
```
opacity
```
: content fade
```
overflow
```
: hidden during transition

```
grid-template-rows
```
: 实现平滑高度过渡
```
max-height
```
: 实现方式更简单但精度较低
```
transform
```
: 旋转Chevron图标
```
opacity
```
: 内容淡入淡出
```
overflow
```
: 过渡期间隐藏溢出内容