在CSS动画完成后删除类- jQuery
CSS动画是一种通过CSS属性的变化来实现动画效果的技术。在CSS动画中，我们可以使用关键帧（keyframes）来定义动画的各个阶段，然后通过将动画应用到元素的类来触发动画。
在jQuery中，我们可以使用addClass()和removeClass()方法来添加和删除类。为了在CSS动画完成后删除类，我们可以使用jQuery的动画回调函数。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 1s;
}
.box.animate {
background-color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.box').click(function() {
$(this).addClass('animate');
$(this).one('transitionend', function() {
$(this).removeClass('animate');
});
});
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>在上面的代码中，我们定义了一个名为"box"的div元素，并为其添加了一个点击事件。当点击"box"元素时，我们通过addClass()方法将"animate"类添加到"box"元素上，从而触发CSS动画。然后，我们使用one()方法来监听CSS动画的transitionend事件，该事件在CSS动画完成后触发。在事件回调函数中，我们使用removeClass()方法将"animate"类从"box"元素上移除，从而实现在CSS动画完成后删除类的效果。
这种方法可以应用于任何CSS动画，无论是使用transition属性还是使用@keyframes规则定义的动画。
推荐的腾讯云相关产品：无
希望以上内容能够满足您的需求，如有其他问题，请随时提问。
相关·内容
3回答
我在我的网站上有一个预加载器，它有一个屏幕下来，然后当页面加载时，屏幕又回来了。jQuery(document).ready(function() {
$('.prepage').one("webkitTransitionEndheadtype { top: 0;
} <script src="https://cdnjs
浏览 50提问于2019-02-08得票数 1
回答已采纳
我正在尝试创建一个动画粘滞导航，当用户滚动过某个点时，它会移动到文档的顶部。它几乎可以正常工作了(并且在第一次加载页面时运行得很好)，但是当用户滚动到顶部，然后第二次向下滚动时，导航会跳转而不显示动画。有没有人看到我做错了什么？这是到目前为止我的jQuery：$(window).scroll(function(){
if( $(document).scrollTop() > 150 ){
浏览 0提问于2013-07-04得票数 3
回答已采纳
嘿，伙计们，我正在做一个滑块，在这里我必须添加一个带有transform属性的类，并且一旦这个类被完全添加并且动画已经完成，添加或移除另一个类。这是我做过的代码，但不起作用。function(){这里，我试图向.backgroundImage中添加一个名为anim的类，一旦完全附加，删除第二个类.anotherClass，想法
浏览 7提问于2014-06-06得票数 1
回答已采纳
6回答
我想淡出一个元素(将其不透明度转换为0)，然后在完成后从DOM中删除该元素。
在jQuery中，这很简单，因为您可以指定动画完成后发生的“移除”。但是，如果我希望使用CSS3转场来制作动画，有没有办法知道何时转场/动画已经完成？
浏览 2提问于2012-02-13得票数 216
回答已采纳
在测试mouseover事件时，我注意到了一个问题。在下面的例子中，有一幅图像，当你将它悬停时，它变大了，当鼠标出了，它又回到了正常的大小，但是当你多次快速地通过它的时候，它会变得越来越大，越来越小，就像它已经记住了鼠标上的每一个传球，并且不停地播放动画
浏览 4提问于2013-10-05得票数 0
回答已采纳
1回答
如何在执行animated.css动画后将元素返回到它的位置？我使用了这段代码，但是它只执行了一次，然后类就不再删除了。
浏览 1提问于2017-04-06得票数 0
回答已采纳
我正在使用JQuery加载一个带有一些文本的JPEG图像(作为css背景)。文本在除资源管理器( XP上的6和7，W7上的8)之外的所有浏览器中都可以正常呈现，其中抗锯齿透明度是针对黑色而不是图像进行的。如果我将图像和文本直接加载到HTML中，它会工作得很好，所以只有在使用Javascript动态更改文本和图像时才会出现问题。
如何使资源管理器在渲染文本时能够识别背景图像？
浏览 0提问于2010-11-01得票数 0
6回答
我有css代码：只在进入网站时播放一次我的网站上的按钮不起作用或者在动画播放后删除类延迟x秒？
浏览 0提问于2012-12-15得票数 13
回答已采纳
2回答
动画完成后移除类
、、、
我有一个动画序列为所有的div与类loaded。
目标是将类visible添加到这些div (这是一个css不透明动画)，然后在动画完成/完成后删除类loaded。
浏览 6提问于2020-01-24得票数 2
回答已采纳
selector') 'background-color' : 'transparent' $(this).css({ 'background-color' : '' });这很复杂，因为：
我需要在动画完成后删除style=""，因为否则style将继续覆盖.hover处理程序设置的CSS</
浏览 3提问于2014-04-17得票数 0
5回答
});
$(this).addClass("animate");当您将鼠标悬停在.test元素上时，它会添加一个animate类，从而触发动画。在动画结束时，animationEnd删除了animate类。
但是，如果您将鼠标悬停在动画上直到它完成，然后在动画完成后取消悬停，则会添加另一个animate<
浏览 2提问于2013-07-04得票数 0
回答已采纳
jQuery("#bubble_mate").text(responseText.totalmail);当我第一次加载页面时，它会激活气泡，但是这个函数是在一个互操作上设置的，所以每次有新邮件时，它都会激活气泡，但它不会。我的动画和其他功能都很完美。只是当它在设定的时间间隔内被调用时，它就没有生命了。它公布邮件总数..。但没有动画。
请帮帮
浏览 13提问于2012-11-27得票数 1
我有一些文本我正在动画，我这样做使用CSS关键帧。animation-fill-mode: forwards 100% { }然后，我使用jQuery将show-me类添加到元素：稍后，在动画完成后，我尝试通过代码更改元素的不透明度，但无法这样做：
&
浏览 0提问于2015-12-16得票数 5
2回答
我有一个元素，我想改变背景颜色(如:蓝色)的点击和返回白色(#FFF)立即。我不是想在这里讨价还价。 e.preventDefault();}
上面的代码只工作一次，即我可以看到效果一次，但
浏览 0提问于2015-08-26得票数 2
回答已采纳
2回答
我在给一个伪元素做动画。当我悬停伪元素时，会向它添加.skew类，从而触发CSS动画。动画完成后，animationend将删除该.skew类。至少在Chrome和Firefox中是这样的，但是在IE10中添加了.skew类，但动画完成后没有删除。我不确定是否是这样，但这可能是因为在第一次触发动画时悬停伪元素，
浏览 0提问于2013-10-02得票数 1
2回答
在我的应用程序中，我想给用户一个类似iOS的体验。我希望我的接口功能类似于iOS。我主要考虑的是这里的导航。我希望我的应用程序从左到右幻灯片，并显示动态内容取决于哪个链接的用户点击。下面是一个显示导航方式的视频：
因此，我要求的是如何实现滑
浏览 3提问于2012-03-29得票数 0
回答已采纳
4回答
您的帮助将不胜感激：后退按钮将带您返回到开始(回放动画)，以防您想要重温这些步骤。与回放动画相关的是给.textBox的一个.addClass("fadeOut")，这样它们就会淡出。
我想在回放动画完成后去掉.fadeOut，这样当单击.forward时，框可以再次淡入。
浏览 3提问于2015-12-10得票数 1
2回答
我有一个图像标签，它在每3秒改变为不同的图像，我想添加到它的动画样式，每次图像切换，css动画关键帧将生效。我似乎想不出如何在javascript中应用动画。]; } }
浏览 1提问于2020-04-14得票数 0
参见示例在本例中，css动画在框的宽度上播放。OnClick，JQuery动画试图缩小框的宽度和高度，但只更改高度。这是密码。$(".a").click(function(e) { width: "-=100px", // doesn
浏览 4提问于2014-12-24得票数 2
回答已采纳
3回答
使用，只要将元素插入到DOM中，就可以对其进行动画处理。下面是一些示例CSS： from {opacity:0;}}
-moz-animation: fadeIn 500ms;}
在从DOM中删除元素之前，是否有一些类似的功能可用于将动画(通过CSS
浏览 1提问于2011-08-10得票数 58
回答已采纳
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
腾讯云开发者
