javascript - 具有addClass和removeClass的jQuery CSS动画

因此，我现在制作了jQuery Ajax代码，用于检查用户名和密码是否正确。但是，我不仅想显示错误消息，还想动摇元素。

定义摇动？

WordPress的那种震动。转到wordpress.com/wp-login.php并在其中填写一些随机信息，然后元素就会摇动。

可以通过Animate.css进行摇动。

那是什么问题呢？

登录失败时，jQuery会执行此操作。
$('.element').addClass('shake');
但是，因为晃动元素的CSS动画只能运行一次，所以当它晃动元素后，我们就不需要CSS晃动类了。

所以我尝试了:
$('.element').addClass('shake').removeClass('shake');
但这一切发生得太快了。

所以我再次尝试:
$('.element').addClass('shake').delay(1000).removeClass('shake');
仍不播放动画，然后从.shake中删除类.element。如果用户输入了错误的详细信息，则一次摇动将不起作用。

您可以玩 fiddle here。

目标是能够通过单击“摇动”按钮摇动元素一次。

最佳答案

动画完成后，您可以使用以下命令删除该类。

Updated Example

$(function () {
    $('button').click(function () {
        el = $('.element');
        el.addClass('shake');
        el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            el.removeClass('shake');
        });
    });
});

关于javascript - 具有addClass和removeClass的jQuery CSS动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23449068/