使用 jQuery 调用 CSS 动画答案

【问题标题】：Calling a CSS animation using jQuery使用 jQuery 调用 CSS 动画
【发布时间】：2013-07-26 06:44:10
【问题描述】：

我在使用 jQuery 调用 CSS 动画时遇到了一点问题。基本上，如果输入的值什么都不是，我希望表单摆动（暗示有问题）。我试过用.addClass，但还是不行。

HTML

<form id="form">
     <input type="text" id="fld"/>
     <button id="btn">Get</button> 
</form>

CSS

form {
display: block;
margin: 0 auto;
width: 340px;
padding: 55px 0 0 0;
-webkit-transition: webkit-transform .75s ease-in-out;
}

.someAnimation {
-webkit-animation: errorAlert .75s ease-in-out;
}

@-webkit-keyframes errorAlert {

0%{
    -webkit-transform:translateX(-20px);
}

25%{
    -webkit-transform:translateX(20px);
}


50%{
    -webkit-transform:translateX(-20px);
}

75%{
    -webkit-transform:translateX(20px);
}

100%{
    -webkit-transform:translateX(0px);
}


}

jQuery

$('#btn').on('click', function(){
            if($('#fld').val() == null || $('#fld').val() == ""){
                $('#form').addClass('.someAnimation');
            }
       });

【问题讨论】：

标签： jquery html css function animation

【解决方案1】：

您在 jquery addClass 函数中使用 .someAnimation，您应该在不使用 DOT 的情况下使用它

你应该使用

  $('#form').addClass('someAnimation');

【讨论】：

是的，我经常犯这个错误。修好了，还是不行。它可以工作，但移动得又快又生涩。
有没有办法让它变慢？还是更流畅？
是的，完全正确！谢谢！

【解决方案2】：

将 .someAnimation 替换为 someAnimation 。那么，

确保您的 if() 条件为 true 并尝试使用 trim() 之类的，

$('#btn').on('click', function(){
        if($.trim($('#fld').val()) == null || $.trim($('#fld').val()) == "")           
             alert("Condition works");
             $('#form').addClass('someAnimation');
        }
});

但不确定这是否适用于您的场景。

【讨论】：