Question

我需要在点击时为'div'添加一个类，用于CSS3动画。但是我还要求在动画结束后删除该类。

我试过这样的东西，但它不起作用 -

$('.class').click(function() {
    $('.class').removeClass("animate");
    $(this).addClass("animate");
});

请帮助，谢谢。

Answer 1

你有两个直接的可能性：

<强> 1）使用动画完成后触发的setTimeout函数。要实现这一点，您应该知道动画持续时间有多长：

$('.class').click(function() {
    var animDuration = 1000; //ms of the animation duration
    $(this).addClass("animate");
    setTimeout(function(){
       $(this).removeClass("animate");
    }, animDuration);
});

2）更好的解决方案是在animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd上添加一个eventListener，只要动画实际完成就会触发该事件。对于这种方法，您不需要知道动画的持续时间。

编辑：来自adeneo，还有一些代码来自here：

$('.class').click(function() {
    var animDuration = 1000; //ms of the animation duration
    $(this).addClass("animate");
    $(this).bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function () {
       $(this).removeClass('animate');
    });
});

上面的代码几乎就是你所说的“动态获取持续时间”。它真正做的是监听动画完成/结束时触发的事件。多事件侦听器的原因是由于浏览器兼容性，每个浏览器都会触发自己的事件。（oAnimationEnd = Opera，MSAnimationEnd = IE等）

谢谢：https://coderwall.com/p/hn7gsg

Answer 2

您可以将动画功能用于动画

   $('.class').click(function() { 
        $(this).addClass("animate");
        $('.class').animate($('.class').removeClass("animate"),2000);   
    });

使用jquery在每次单击时向div添加/删除一个类

2 个答案: