addClass ，然后删除同一类的类

addClass and then removeClass the same class

本文关键字：一类 然后 删除 addClass      更新时间：2023-09-26
$(".CSS3-Animation").addClass('on');

这把一组CSS3动画台词放到了.CSS3-Animation。现在我要做的是在加载后立即删除这个类名。

.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');
有什么

方法可以解决这个问题？

提前谢谢。

你可以

像这样使用onwebkitanimationend：

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

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

您可以使用

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);

文档

相关文章：