过渡界面，代码实现

Pasquale D’Silva 的文章 过渡界面 真的在广为流传。这是一篇简短易读的文章，阐明了一个重要的观点。过渡和动画不仅仅是视觉效果，它们还可以帮助你的大脑了解页面上正在发生的事情。

如果将一个列表项插入到列表中，与其让它突然出现，不如使用一个动画将列表移动以腾出空间，这样会非常清楚地表明发生了什么。否则，它会一闪而过，让你来不及反应。

文章中的动画 GIF 使其变得非常直观，所以 去看看吧。

Pasquale 并不是说“每次都必须这样做！”，但它们是很好的例子，所以我想尝试一下如何在 Web 上实现它们。

Check out the coded examples of transitional interfaces on CodePen.

没有什么突破性的东西，但有一些技巧在起作用。

在添加列表项的示例中，通过首先将列表项设置为 max-height: 0; 并让 @keyframes 动画运行在它们上面来扩展 max-height 到 50 来在列表中腾出空间。请注意，确保该数字足够高，以覆盖文本合理放大的空间。

@keyframes 只有 to { } 代码块。当省略 from { } 或 0% { } 代码块时，它只是从动画属性的自然值开始。这里使用高度、不透明度和缩放来使它弹出到位。

.new-item {
  max-height: 0;
  opacity: 0;
  transform: scale(0);
  animation: growHeight 0.2s ease forwards;
}
@keyframes growHeight {
  to { 
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}

在滑入示例中，首先在列表中创建空间，然后将项目滑入该空间。这是通过使用两个不同的 @keyframe 动画来完成的。一个用于创建空间，另一个用于执行滑动。您可以将它们都应用于单个元素，并间隔开它们运行的时间。

.new-item {
  max-height: 0;
  opacity: 0;
  transform: translateX(-300px);
  animation: 
    openSpace 0.2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;
}
@keyframes openSpace {
  to { 
    max-height: 50px;
  }
}
@keyframes moveIn {
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

第二个 animation 值具有第二个时间参数，即延迟。延迟与第一个动画的持续时间相同。因此它们按顺序运行。

在弹出详细信息视图示例中，列表项的大小通过使用 transform: scale(X); 来增长。在其后面，列表通过也使用缩放变换隐藏在视图之外。它使自身变得更小并隐藏在扩展的列表项后面，该列表项将其自身变换成自身大小的许多倍来进行补偿。