Question

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

这会为.CSS3-Animation提供一组CSS3动画线。现在我要做的是在加载后立即删除这个类名。

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}
}

动画完成后我需要removeClass（“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

您可以像这样使用onwebkitanimationend：

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

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

Answer 2

您可以使用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

addClass然后removeClass相同的类

2 个答案: