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

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

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

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

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

CSS类在验证时只工作一次

1 个答案: