CSS 类在验证时只工作一次

CSS class working only once on validation

本文关键字：一次 工作 验证 CSS      更新时间：2023-09-26

我定义了一个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按钮，则不会发生摆动效果。
我做错了什么？

问题是在动画运行后没有删除类名。这是对更正行为或删除类名的小提琴：https://jsfiddle.net/4fqLhbjx/1/

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

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

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

相关文章：