lists-grids

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

List & Grid Animation Principles

列表与网格动画原则

Apply Disney's 12 principles to lists and grids for smooth, organized motion.

将迪士尼的12项动画原则应用于列表和网格，打造流畅、规整的动效。

Principles Applied to Lists & Grids

应用于列表与网格的原则

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

List items compress slightly when grabbed for reorder. Grid items can stretch when expanding to fill space on filter.

列表项在被抓取重新排序时轻微压缩。网格项在筛选后填充空间时可进行拉伸。

2. Anticipation

2. 预备动作（Anticipation）

Before list reorders, items briefly compress. Before filter removes items, they can shrink slightly. Prepares for change.

列表重新排序前，项会短暂压缩。筛选移除项前，它们可略微缩小。为变化做准备。

3. Staging

3. 舞台呈现（Staging）

Item being dragged lifts above others (z-index + shadow). Filtered results highlight while others fade. Guide eye to relevant items.

被拖拽的项会悬浮于其他项上方（提升z-index并添加阴影）。筛选结果高亮显示，其他项逐渐淡出。引导视线聚焦相关项。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）

Define states: entering, resting, reordering, exiting. Use pose-to-pose for predictable, controllable list animations.

定义状态：进入、静止、重新排序、退出。使用关键帧动画实现可预测、可控的列表动画。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作（Follow Through & Overlapping Action）

Stagger item entrance: first item leads, others follow (30-50ms delay). Content within items lags behind item container.

错开项的入场时间：第一个项先入场，其他项依次跟随（30-50毫秒延迟）。项内的内容滞后于项容器移动。

6. Ease In & Ease Out

6. 缓入缓出（Ease In & Ease Out）

Item enter:

ease-out

. Item exit:

ease-in

. Reorder:

ease-in-out

. Stagger easing should feel like a wave, not mechanical.

项入场：

ease-out

。项退场：

ease-in

。重新排序：

ease-in-out

。错开的缓动效果应如波浪般自然，而非机械生硬。

7. Arcs

7. 弧线运动（Arcs）

Reordering items should follow curved paths, not straight lines. Adds personality and organic feel to grid shuffles.

重新排序的项应沿曲线路径移动，而非直线。为网格重排增添个性与自然感。

8. Secondary Action

8. 次要动作（Secondary Action）

While item moves (primary), placeholder appears (secondary), other items shift (tertiary). Coordinate the ensemble.

当项移动时（主要动作），显示占位符（次要动作），其他项随之移位。协调整体动效。

9. Timing

9. 时间节奏（Timing）

Stagger delay: 30-75ms per item
Item enter: 200-300ms
Item exit: 150-200ms
Reorder: 250-350ms
Filter shuffle: 300-400ms
Max total stagger: 500-800ms

错开延迟：每项30-75毫秒
项入场：200-300毫秒
项退场：150-200毫秒
重新排序：250-350毫秒
筛选重排：300-400毫秒
最大总错开时长：500-800毫秒

10. Exaggeration

10. 夸张表现（Exaggeration）

Dramatic filter transitions can scale items to 0 before removing. New items can overshoot position slightly. Make sorting visible.

戏剧性的筛选过渡可将项缩小至0后再移除。新项可略微超出目标位置再归位。让排序过程清晰可见。

11. Solid Drawing

11. 扎实绘制（Solid Drawing）

Maintain consistent spacing during animations. Grid gaps should stay uniform. Item proportions should remain stable during transforms.

动画过程中保持间距一致。网格间距应始终均匀。项的比例在变换过程中保持稳定。

12. Appeal

12. 吸引力（Appeal）

Smooth list animations feel premium. Jarring reorders feel broken. Staggered entrances guide attention naturally. Users notice quality.

流畅的列表动画质感高级。生硬的重排会给人出错的感觉。错开的入场方式自然引导注意力。用户能感知到动效的品质。

CSS Implementation

CSS 实现

css

.list-item {
  animation: itemEnter 250ms ease-out backwards;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
/* continue pattern */

@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-item {
  transition: transform 300ms ease-in-out,
              opacity 200ms ease-out;
}

css

.list-item {
  animation: itemEnter 250ms ease-out backwards;
}

.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
/* continue pattern */

@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid-item {
  transition: transform 300ms ease-in-out,
              opacity 200ms ease-out;
}

Key Properties

关键属性

```
transform
```
: translate, scale
```
opacity
```
: enter/exit
```
animation-delay
```
: stagger
```
grid-template
```
: layout shifts
```
order
```
: reordering

```
transform
```
: 平移、缩放
```
opacity
```
: 入场/退场
```
animation-delay
```
: 错开效果
```
grid-template
```
: 布局偏移
```
order
```
: 重新排序