CSS动画仅在第一次起作用。

Question

以下代码将淡入淡出一个元素。当淡出时，通过使其大小为零来“删除”该元素。

第一次将类名show-loading添加到具有loading类的现有元素时，以下代码起作用。同样，当我同时添加类名hide-loading并删除类show-loading时，它也正常工作。

但是，第二次及之后每次设置类时，此动画都不会呈现。相反，它直接跳转到动画的最后一帧，根据是否指定show或hide而使其可见或不可见。因此，最终结果是正确的，但动画部分不正确。

我如何使动画在设置类时每次都参与，而无需显然地删除元素并添加新元素以重置保存的任何状态...？

html

<div class="loading"></div>

css

.loading
{
  overflow: hidden;
  position: fixed;
  background: #fff;
  z-index: 9999;
  user-select: none;
}

.loading.show-loading
{
  animation: loading-fade .4s 1 linear both;
}

.loading.hide-loading
{
  animation: loading-fade .4s 1 linear both;
  animation-direction: reverse;
}

@keyframes loading-fade
{
  0%
  {
    opacity: 0;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  1%
  {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  100%
  {
    opacity: 1;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

- superhero

---

我们可以有一些能够产生这个的代码示例吗？ - O_Z

Answer 1

这方面的一个技巧是使用两个名称不同但结构相同的动画来解决问题。

请查看此 fiddle。

这是已知但意外的行为，你可以通过“移除”当前动画，然后应用另一个动画（即使它具有相同的结构）来获得所需的效果 - 这就是我使用两个@keyframe动画的原因。

.loading.show-loading {
    animation: loading-fade 1s 1 linear both;
}

.loading.hide-loading {
    animation: loading-fade-backwards 1s 1 linear both;   
    animation-direction: reverse;
}

- Mihai Cicu