动画第二次没有播放

Question

当密码错误时，我有一个简单的密码框抖动动画，但是当我输入错误的密码时它不会第二次播放。我的逻辑如下：

function passwordCheck(){
    var password = document.getElementById("passwordbox")
    var checkbox = document.getElementById("checkbox")
    var submittedPassword = password.value;
    
    if( submittedPassword == "abc"){
        
        location.href = "secret.html"
    }
    if(submittedPassword !== "abc"){
       checkbox.checked = false
       document.getElementById("passwordbox").style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both"    
    }
}

这是我的 css 动画：

@keyframes shake {
    8%, 41% {
        transform: translateX(-10px);
    }
    25%, 58% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-5px);
    }
    92% {
        transform: translateX(5px);
    }
    0%, 100% {
        transform: translateX(0);
    }
}

Answer 1

在您的代码中，您永远不会删除动画。每次播放动画之前，您都需要将其删除，这样它就会播放不止一次。您可以使用以下代码：

function passwordCheck(){
    var password = document.getElementById("passwordbox")
    var checkbox = document.getElementById("checkbox")
    var submittedPassword = password.value;
    
    if( submittedPassword == "abc"){
        
        location.href = "secret.html"
    }
    if(submittedPassword !== "abc"){
       document.getElementById("passwordbox").style.animation = "";
       checkbox.checked = false
       document.getElementById("passwordbox").style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both"    
    }
}

Answer 2

已修复！我的 JS 代码现在是这样的

function passwordCheck(){
    var password = document.getElementById("passwordbox")
    var checkbox = document.getElementById("checkbox")
    var submittedPassword = password.value;
    
    if( submittedPassword == "abc"){
        
        location.href = "secret.html"
    }
    if(submittedPassword !== "abc"){
        document.getElementById("passwordbox").style.animation = "shake 0.82s cubic-bezier(.36,.07,.19,.97) both";
        checkbox.checked = false
        document.getElementById('passwordbox').addEventListener("animationend" ,function restart(){document.getElementById("passwordbox").style.animation = "";})    
    }
}