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; 
}