如何動畫前進，等待X秒，動畫回來，然後刪除類？

我想爲我的按鈕應用一個動畫，但我無法讓它向後動畫，即當類被刪除時。它只是向前動畫。如何動畫前進，等待X秒，動畫回來，然後刪除類？

基本上我需要做的是：

添加類
等待4秒
刪除類

但動畫爲動畫背部取下前級。

我該如何做到這一點？

編輯：我發現的唯一解決方案是使用不同的類，但我覺得必須有更好的方法。如果可能的話，我不想處理超過一個班。這是我的嘗試：

doStuff = function() { 

    /... some code .../ 

    button.classList.add('btn-success-msg'); 

    setTimeout(function() { 
    button.classList.remove('btn-success-msg'); 
    }, 4000); 
} 

@keyframes btn-message { 

    0% { 
    width: 0; 
    opacity: 0; 
    visibility: hidden; 
    } 

    100% { 
    width: 100%; 
    opacity: 1; 
    visibility: visible; 
    } 
} 

.btn-success-msg { 
    position: relative; 

    &:before { 
    @include pos(0, $left: 0); 
    content: 'Success!'; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    border: 1px solid $success; 
    border-radius: 5px; 
    background-color: $success; 
    color: white; 
    animation: btn-message 500ms forwards; 
    } 
}

來源

2016-09-26 Chrillewoodz

請解釋這是「題外話」 .. – Chrillewoodz

你可以通過強制執行的基本知識實現這一目標。我建議看一些關於這種東西的教程。改進總是一個好主意！但不幸的是，你會在這裏下降。 – Shadetheartist

@Shadetheartist我知道很明顯的基礎知識，或者我甚至不會獲得前進動畫的工作，對嗎？..另請參見更新的問題。 – Chrillewoodz

您應該使用過渡，沒有動畫，來達到這種效果。轉換髮生在屬性改變時，所以當一個類被添加或刪除時，它可以觸發轉換。另外，如果在轉換完成之前刪除類，它將自動反轉轉換而不跳過。

var testing = $('.testing'); 
 

 
// after 1 second, add a class 
 
setTimeout(function() { 
 
    testing.addClass('animate'); 
 
}, 1000); 
 

 
// after 4 seconds, remove the class 
 
setTimeout(function() { 
 
    testing.removeClass('animate'); 
 
}, 4000);

.testing { 
 
    background: red; 
 
    width: 100px; 
 
    
 
    transition: transform 2s; 
 
} 
 

 
.animate { 
 
    transform: translateX(200px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="testing">testing</div>

來源

2016-09-26 17:19:48 Soviut

不能相信我沒有想到這一點，謝謝！ – Chrillewoodz

如何動畫前進，等待X秒，動畫回來，然後刪除類？

回答

相關問題