將CSS關鍵幀動畫化回初始狀態

Question

我查看過所有答案（question 1,question 2,question 2），但仍無法讓我的動畫正常工作。我有一個簡單的關鍵幀，它在初始時動畫良好，但在切換使用animation-direction: reverse隱藏元素回到關鍵幀的初始狀態的hidden class時不會動畫來回。

我想動畫元素爲translateY(0%)當單擊顯示按鈕時，單擊隱藏按鈕但animation-timing-function: ease沒有適當地應用，因此沒有動畫時動畫回到translateY(-50%)。我也需要爲此使用關鍵幀，因爲稍後我將對更復雜的轉換進行動畫處理。

這裏是我有：

$('#show').on('click', function() { 
 
\t $('#slide').removeClass('hidden'); 
 
}); 
 
$('#hide').on('click', function() { 
 
\t $('#slide').addClass('hidden'); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-duration: 0.4s; 
 
    animation-delay: 0s; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: both; 
 
} 
 
#slide.animation1 { 
 
    animation-name: slide; 
 
} 
 
#slide.hidden { 
 
    animation-direction: reverse; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
     opacity: 0; 
 
     transform: translateY(-50%); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" class="animation1"> 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>

Answer 1

您需要爲這2個不同的動畫。只是改變方向將不會重新觸發動畫。

例如：

$('#show').on('click', function() { 
 
\t $('#slide').removeClass('hidden'); 
 
}); 
 
$('#hide').on('click', function() { 
 
\t $('#slide').addClass('hidden'); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-duration: 0.4s; 
 
    animation-delay: 0s; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: both; 
 
     opacity: 0; 
 
     transform: translateY(-50%); 
 
} 
 
.animation1 { 
 
    animation-name: slide; 
 
} 
 
#slide.hidden { 
 
    animation-name: slide2; 
 
} 
 
@keyframes slide { 
 
    to { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
} 
 
@keyframes slide2 { 
 
    from { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" class="animation1"> 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>

Answer 2

您不必使用@keyframes這一點。你已經使用jQuery插件刪除類，所以你也可以使用jQuery來添加一個類的onLoad，然後只用translateY

首先，在默認狀態設置translateY(-50%)，負載添加animation1類及類，在CSS中，你設置了translateY(0)。

然後點擊hide按鈕添加類hidden（就像你現在這樣做），並在CSS中只需添加translateY(-50%)。

這將實現你想要的

見下面片段，讓我知道，如果這是你在找什麼

$(window).on("load", function() { 
 
    $("#slide").addClass("animation1") 
 
    $('#show').on('click', function() { 
 
    $('#slide').removeClass('hidden'); 
 
    }); 
 
    $('#hide').on('click', function() { 
 
    $('#slide').addClass('hidden'); 
 
    }); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    transform: translateY(-50%); 
 
    transition: 0.3s; 
 
} 
 

 
#slide.animation1 { 
 
    transform: translateY(0%) 
 
} 
 

 
#slide.hidden { 
 
    transform: translateY(-50%) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" > 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>