css动画仅在第一次时有效

Question

以下代码将使元素淡入和淡出。当淡出时，它将通过使其没有大小来“删除”元素。

以下代码的工作方式与我第一次将类名添加show-loading到具有 class 的现有元素时相同loading。此外，当我删除类时show-loading，在添加类名的同时hide-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;
  }
}

Answer 1

实现此目的的一个技巧是使用不同的名称两次使用相同的动画。

看看这个小提琴。

这是一种已知但意外的行为，您可以通过“删除”当前动画，然后应用另一个动画（即使它具有相同的结构）来获得所需的效果 - 这就是我使用两个 @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;
}