在没有setTimeout的情况下移除和添加类时，不会发生Css动画。
在没有setTimeout的情况下移除和添加类时，不会发生CSS动画。这是因为CSS动画是由浏览器的渲染引擎处理的，当修改元素的类时，渲染引擎会重新计算元素的样式，并将动画效果应用于元素。而在没有setTimeout的情况下，类的修改会立即生效，渲染引擎无法捕捉到类的变化，导致无法触发CSS动画。
要解决这个问题，可以使用setTimeout来延迟添加或移除类的操作。通过使用setTimeout函数，可以将类的修改放在JavaScript事件队列的末尾，使得浏览器有足够的时间来捕捉到类的变化，并触发CSS动画效果。
以下是一个示例代码，展示了如何使用setTimeout来添加和移除类，以触发CSS动画效果：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s;
}
.animate {
width: 200px;
}
</style>
</head>
<body>
<div id="myBox" class="box"></div>
<script>
var box = document.getElementById("myBox");
// 添加类并触发动画效果
setTimeout(function() {
box.classList.add("animate");
}, 1000);
// 移除类并触发动画效果
setTimeout(function() {
box.classList.remove("animate");
}, 2000);
</script>
</body>
</html>在上述示例中，我们通过使用setTimeout函数来延迟添加和移除类的操作，从而使得CSS动画能够正常触发。在1000毫秒后，我们添加了名为"animate"的类，使得元素的宽度从100px过渡到200px，触发动画效果。在2000毫秒后，我们移除了"animate"类，使得元素的宽度恢复为100px，再次触发动画效果。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
当.is-animated类被添加到.box元素中时，它会生成一个简单的背景变化动画。我想让它做这个简单的动画，比如说每2秒做一次。问题是，如果它已经有了.is-animated类，并且我删除它，然后再次添加它，那么动画就不会发生，除非我将添加的内容放在setTimeout函数中。为什么会发生这种情况？在这种<
浏览 17提问于2020-09-27得票数 0
2回答
我在我的大多数网站上使用animate.css，因为它非常棒，但我经常遇到一个问题。如果要检查以下代码：</html>
在加载页面时好的</
浏览 6提问于2017-08-16得票数 0
回答已采纳
我试图让动画播放时，一个元素被选中，而反向动画播放时，该元素被取消选择。我的CSS看起来如下： from { }
我尝试过的事情：
使用setTimeout(..., 0)，在移除和添加</e
浏览 4提问于2019-12-22得票数 0
回答已采纳
我正在尝试设置一个动画在画布菜单上点击另一个元素。单击按钮后，这样的离开画布菜单就会变成动画。我的代码如下：问题： $(".ok_1").css("left", "0px")
$(".o
浏览 2提问于2016-12-03得票数 0
回答已采纳
我有三个按钮与不同的点击动画。在单击时，它添加"active“类来启动CSS动画。使用setTimeout，它移除该类以删除动画的最终状态，因此可以再次单击按钮。但不幸的是，当您快速单击按钮时，某些按钮不会通过setTimeout。
不清楚到底是怎么回事，但这是我的js。btn =
浏览 0提问于2018-10-12得票数 0
回答已采纳
我使用jQuery将类切换为repeat (它每隔5秒打开和关闭一秒动画)，但当另一个元素通过jQuery向其添加类时，我需要停止repeat。当页面滚动到该部分时，单独的"trigger“元素将获得一个”活动“类-这是我需要动画停止并且不再播放的时候。("animated bounce");
},5000); 这是我一直在尝试使用的
浏览 58提问于2019-10-06得票数 0
回答已采纳
1回答
类似的问题有很多，但我还没有找到明确的答案。 有时，我需要在React中再次运行CSS动画，在它完成后，在特定的条件下。这种情况背后通常有相当复杂的逻辑，所以我简化了它，以便在不增加复杂性的情况下显示我的意思。 假设我有一个复选框来决定是否要运行动画： ? 禁用复选框时，动画将停止，但如果已在运行，则动画将完成其循环。我想
浏览 68提问于2021-07-08得票数 3
很难解释，但我刚刚完成并提交了我的挑战代码，虽然我满足了挑战的基本要求，但我决定添加一个动画作为额外的一点。 我们得到了一些代码，每次浏览器窗口刷新时，这些代码都会在数组中随机生成一组新的数字。我的工作是对数组中的数字求和，并构建一个应用程序，该应用程序使用next和previous按钮遍历数组。我添加了一个动画到混合中，由上面的条件触发，所以如果它显示“你买得起”，动画<
浏览 17提问于2020-11-23得票数 1
回答已采纳
2回答
我正在尝试将CSS3动画应用于跨跨的文本。我使用jQuery添加这些类，因为这个动画发生在click()函数中。在添加类之前，我还要删除它们，因为这些类只能存在一次才能使动画工作。
我以前已经做过很多次了，但
浏览 2提问于2013-04-13得票数 1
当他们双击图像时，我将图像缩放到其大小的两倍(-webkit-transform: scale( 2 ))。有谁可以帮我？非常感谢。
浏览 1提问于2011-08-07得票数 8
即在动画完成后移除类名。否则，如果我下次再加上类名，就好像什么都没发生一样--它不会再动了。我还检查了一遍:我不能删除类名，然后立即将它添加回来，因为它也会像什么都没有发生一样。问题是:是否有一种方法可以更优雅地使用CSS动画？不知何故，只是告诉动画重新启动自身，而不需要删除类并将类添加回？当它是在</
浏览 2提问于2021-02-15得票数 0
回答已采纳
我正在创建一个带有css类切换的动画的组件。示例的沙箱。在这样修改状态的情况下，动画不会发生： th
浏览 1提问于2018-01-31得票数 6
回答已采纳
1回答
构建一个基于CSS类的简单Multilevel推送菜单，它没有javascript动画，并且在CSS转换/转换上运行。除了切换是开放的类外，它对每个部分都很好。当用户单击链接时，应该首先删除..is open类。然后添加它，使动画激活。如果我说在第二阶段将. it open类更改为.addClass("foo
浏览 3提问于2013-08-21得票数 1
回答已采纳
隐藏时，必须将显示设置为“无”，以避免出现制表符索引和表单验证问题。因此，我使用max-height属性来利用CSS转换来动态地隐藏和显示，并将显示从'none‘切换到'block’(或者只是通过从元素中移除display属性来切换到默认值。描述的问题在任何一种情况下都会发生)。
在我的测试中，我只能在iOS上的OSX Safari、Chrome和Safari以
浏览 0提问于2015-01-07得票数 2
3回答
我对CSS3动画有一个问题。我有一个类帮助我动画一个SVG，这个类的名字是‘动画圈’。
问题是，如果我从“输入”元素中移除光标，动画<
浏览 5提问于2021-06-09得票数 2
回答已采纳
6回答
我有一个使用的动画，如果用户愿意的话，我想要重放，但是我尝试的内容不起作用。removeClass('animated rotateInDownRight').addClass('animated rotateInDownRight');我知道脚本本身工作，因为我可以看到它发生在Firebug，但动画不会再次动画。如何使用Animate.CSS实现这一目标？
浏览 8提问于2012-09-13得票数 5
回答已采纳
当我遇到一个奇怪的问题时，我一直在尝试在覆盖div中淡出CSS3过渡。
基本上，我有一个div元素，在它的id上设置了样式-即背景颜色：#000，不透明度: 0，等等，以及浏览器特定的转换样式。默认情况下，overlay元素有一个"hiddenElement“类，将它的display设置为none。当要显示覆盖图时，hiddenElement类被
浏览 5提问于2011-07-15得票数 2
回答已采纳
2回答
在添加新的DOM子元素时显示动画
、、、、
我在parent div中有一个div列表。我现在在这个列表的开头添加另一个div。我正在做这个：我的问题是，我如何动画添加新的div，以便其余的div只是向下滑动。这是它的JSFiddle：
<div class=&quo
浏览 2提问于2013-05-16得票数 0
回答已采纳
我有一个元素，当页面加载时，动画通过animate.css应用到它.<div class="logo></div>$(".logo").addClass("bounce");$
浏览 0提问于2018-01-14得票数 0
回答已采纳
1回答
第二个动画不工作
、、
在一个UL列表中，我想让里面的第一个LI具有动画效果。第一个动画将移除蓝色背景的CSS类，并向其添加新的CSS以使其具有深色背景。它还在里面添加了一行新的代码。第二个动画会将同一个div向上推，并使其淡入淡出，使其消失。然后它就会被移除。
我测试的两个动画都是通过注释掉其他动画而分离出来<em
浏览 0提问于2013-05-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
