CSS幻灯片向上动画-在动画之前简要显示的元素

Question

我有这个CSS动画，当选择页面时，页面从底部滚动到顶部。

我遇到的问题是页面首先短暂显示在其顶部位置，然后消失以从底部滚动到顶部。如何防止页面在显示动画之前显示？

注意：我想保持短暂的动画延迟500ms

mainPanelContent.classList.add('slide-up-now');

---

.slide-up-now {
  -webkit-animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
  -moz-animation: slide-up .6s  cubic-bezier(0.4, 0, 0.2, 1) 500ms;
  animation: slide-up .6s  cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}

@-webkit-keyframes slide-up {
        0% { -webkit-transform: translateY(100%); }
        100% { -webkit-transform: translateY(0); }
}

Answer 1

解：

解决此问题的正确方法是将其设置 animation-fill-mode为backwards（或使用如下速记）：

animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;

推理：

当将延迟添加到任何动画时，其执行将被暂停，直到经过该时间为止，在此期间，元素将保留最初为其分配的任何位置。为了使它从平移位置开始，您必须手动将设置添加到元素（或）告诉UA为您完成设置。

当我们将animation-fill-modeas 设置backwards为时，UA会自动将为动画的第一次迭代的第一帧定义的属性值设置为延迟期间的属性，因此它将从您的案例的平移位置开始。

这是W3C规范所说的animation-fill-mode: backwards

在由动画延迟定义的时间段内，动画将应用在关键帧中定义的属性值，该属性值将开始动画的第一次迭代。这些是from关键帧的值（当动画方向为正常或交替时）或to关键帧的值（当动画方向为反向或交替-反向时）。

替代解决方案：

当然，您也可以通过transform: translateY(100%在元素上添加）来解决此问题，但是当有特定属性可以实现时，这意义不大。

^{（我假设该元素transform: translateY(100%)最初不在您的代码中。）}

为什么使用不透明度可能并不总是可以接受的解决方案？

通过使用解决方案opacity（就像您在自己的答案中所做的那样）是没有错的，但是您会注意到，在opacity动画过程中，动画也会从0到1动画化，这意味着内容会逐渐淡入视图，而不只是滑动动作。虽然，也可以通过在它们之间添加额外的关键帧来解决此问题，但这只是使用单个属性可以实现的解决方法。

所有解决方案的样本：

在下面的代码段中，我添加了带有问题和所有可能的修复程序的示例版本。

animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;

.slide-up-now {
  animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms;
}
.slide-up-now-fixed { /* preferred method */
  animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms backwards;
}
.slide-up-now-fixed-initial-prop {
  transform: translateY(100%);
  animation: slide-up .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}
.slide-up-now-opacity {
  opacity: 0;
  animation: slide-up-opacity .6s cubic-bezier(0.4, 0, 0.2, 1) 500ms forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slide-up-opacity {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Just for demo */

div{
  display: inline-block;
  height: 100px;
  margin: 10px;