lists-grids

列表与网格动画原则

将迪士尼的 12 条原则应用于列表和网格，实现流畅、有序的动态效果。

应用于列表与网格的原则

1. 挤压与拉伸

拖动列表项进行重排时，列表项会轻微挤压。网格项在筛选时展开填充空间，也可以进行拉伸。

2. 预备动作

列表重排前，列表项会短暂挤压。筛选移除列表项前，也可以让它们轻微缩小，为变化做好准备。

3. 演出布局

被拖动的列表项会浮于其他项之上（z-index + 阴影）。筛选结果会高亮显示，其他项则逐渐淡出。引导视线聚焦于相关项。

4. 连续动作与关键姿势

定义状态：进入、静止、重排、退出。使用关键姿势动画，让列表动画更可预测、更易控制。

5. 跟随动作与重叠动作

让列表项依次进入：第一项领先，其他项跟随（延迟 30-50ms）。列表项容器内的内容稍晚出现。

6. 缓入与缓出

列表项进入：ease-out。列表项退出：ease-in。重排：ease-in-out。交错动画的缓动应像波浪一样自然，而非机械生硬。

7. 弧线

列表项重排时应沿曲线路径移动，而非直线移动。这样能为网格洗牌增添个性和自然感。

8. 次要动作

列表项移动时（主要动作），占位符出现（次要动作），其他项移位（第三动作）。协调好整体动画。

9. 时间

• 交错延迟：每项 30-75ms
• 列表项进入：200-300ms
• 列表项退出：150-200ms
• 重排：250-350ms
• 筛选洗牌：300-400ms
• 交错动画总时长上限：500-800ms

10. 夸张

戏剧性的筛选过渡可以先将列表项缩放至 0，再将其移除。新列表项可以略微越过目标位置。让排序过程清晰可见。

11. 扎实绘制

动画期间保持间距一致。网格间隙应始终均匀。变换期间，列表项比例应保持稳定。

12. 吸引力

流畅的列表动画让人感觉品质出众。突兀的重排则会让人觉得出了问题。交错出现的列表项能自然引导注意力。用户会留意到品质。

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;
}

关键属性

• transform：平移、缩放
• opacity：进入/退出
• animation-delay：交错动画
• grid-template：布局变化
• order：重排