javascript - CSS 类仅在验证时工作一次

Question

我定义了一个 CSS 类，如下所示 -

@-webkit-keyframes wiggle {
    0% {-webkit-transform:rotate(2deg);}
    50% {-webkit-transform:rotate(-2deg);}
    100% {-webkit-transform:rotate(2deg);}
}

@-moz-keyframes wiggle {
    0% {-moz-transform:rotate(2deg);}
    50% {-moz-transform:rotate(-2deg);}
    100% {-moz-transform:rotate(2deg);}
}

@keyframes wiggle {
    0% {transform:rotate(2deg);}
    50% {transform:rotate(-2deg);}
    100% {transform:rotate(2deg);}
}

.doWiggle {
    -webkit-animation: wiggle 0.2s;
    -moz-animation: wiggle 0.2s;
}

在 JavaScript 中，我有这个函数 -

function validateOnSubmit() {

    var isValid = true;

    if (document.getElementById("password").value.length <= 5) {
        isValid = false;
        document.getElementById("alert").className = "doWiggle";
    }

    return isValid;

}

validateOnSubmit() 函数的实现形式为 onsubmit="return validateOnSubmit()"

问题是，摆动效果只发生在 一次 点击 submit 按钮时。如果我第二次或连续点击 submit 按钮，摆动效果不会发生。
我做错了什么？

Answer 1

问题是您没有在动画运行后删除类名。这是一个带有更正行为或删除类名的 fiddle :https://jsfiddle.net/4fqLhbjx/1/

基本上我所做的是将其添加到 if 条件中:

setTimeout(function(){
    document.getElementById("alert").className = document.getElementById("alert").className.replace('doWiggle', '');
}, 300);

我选择 300 以确保动画有时间干净地完成。