css动画只能第一次作品

Question

下面的代码会淡入和淡出一个元素。当淡出时，它将通过使其不具有尺寸来“移除”该元素。

下面的代码首次出现时将类名show-loading添加到类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

一个窍门是具有相同的动画两次，但不同的名称。

退房THIS小提琴。

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