addClass 然后 removeClass 相同 class

Question

$(".CSS3-Animation").addClass('on');

这将一组 CSS3 动画线添加到 .CSS3-Animation。现在我要做的是在加载后立即删除此 class 名称。

CSS:

.CSS3-Animation.on{
    animation:grow 0.5s both 0.3s
    }

@keyframes grow{
    0%{transform:scale(.8);opacity:0}
    100%{transform:scale(1);opacity:1}
}

我需要在动画完成后删除 Class("on")，这样下面的 CSS 就可以工作了：

.CSS3-Animation{
    transition-timing-function: ease-out;
    transition-duration: 250ms;
}
.CSS3-Animation:hover{
    transform: scale(1.02) translate(0,2px);
}

显然下面的方法不起作用：

        $(".CSS3-Animation").addClass('on');
        $(".CSS3-Animation").removeClass('on');

有什么方法可以解决这个问题？

提前致谢。

Answer 1

您可以使用 animationend 事件：

$(".CSS3-Animation").on('oanimationend animationend webkitAnimationEnd', function() { 
   $(".CSS3-Animation").removeClass('on');
});

使用 javascript:

 $(".CSS3-Animation")[0].addEventListener("webkitAnimationEnd", removeclass,false);
 $(".CSS3-Animation")[0].addEventListener("animationend", removeclass,false);
 $(".CSS3-Animation")[0].addEventListener("oanimationend", removeclass,false);

Docs

Answer 2

您可以这样使用 onwebkitanimationend：

$(".CSS3-Animation").addClass('on').on('animationend webkitAnimationEnd oAnimationEnd', function(){
    $(this).removeClass('on');
});

您可以在添加 class on 后链接事件 animationend webkitAnimationEnd oAnimationEnd。

addClass 然后 removeClass 相同 class

addClass and then removeClass the same class

javascript

css

jquery