-1

对于 CSS3 动画，我需要在单击时为“div”添加一个类。但是我还需要在动画结束后删除该类。

我尝试过这样的事情，但它不起作用 -

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

请帮忙，谢谢。

4

2 回答 2

3

你有两个直接的可能性：

1) 使用setTimeout动画完成后触发的函数。为此，您应该知道动画持续时间有多长：

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

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

编辑：来自这里adeneo的一些代码：

$('.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

于 2013-10-21T10:43:39.710 回答
0

您可以使用动画功能动画

   $('.class').click(function() { 
        $(this).addClass("animate");
        $('.class').animate($('.class').removeClass("animate"),2000);   
    });
于 2013-10-21T10:50:05.583 回答