Javascript 在单击按钮以设置div动画时添加和删除类

我有两个单词，我试图在点击按钮时设置动画，它通过向div添加一个类来实现。但我只能让它每隔按一次按钮就播放一次，我希望它每次按按钮都能播放

function animateWords() {
    word1.classList.add('puffIn');
    word2.classList.add('vanishIn');
}

我已经尝试过先删除类，但这不起作用，我能让它每隔一段时间执行一次的唯一方法是执行一个if语句，检查类列表是否包含这些类，如果不包含，则删除它们，然后添加它们。但这只会每隔一段时间起作用

任何帮助都会很好 干杯 函数myFunction{ 设x=document.getElementById'question-header' ifx.classList.contains'redclass'{ x、 类列表。删除“redclass” x、 类列表。添加“blueclass” }否则{ x、 类列表。删除“blueclass” x、 类列表。添加“redclass” } } 红班先生{ 背景：红色； } B.蓝班{ 背景：橙色； } 在单击按钮以设置div动画时添加和删除类

---

为我制作动画这可能是您的问题/问题的解决方案

我已经添加了一些样式的话，这样动画将更好地看到。类的删除是通过超时函数完成的，因此不需要使用if语句

函数animateWords{ 让word1=document.getElementById'word1'； 让word2=document.getElementById'word2'； 单词1.类列表.添加'puffIn'； 单词2.类列表。添加“消失”； var wait=window.setTimeoutfunction{ word1.classList.删除'puffIn'； 类列表。删除“消失”； }, 1500; } p{ 显示：块； 浮动：左； 填充：1px； 背景：5c； 边框：2个实心f6f6f6； 颜色：f6f6f6； -webkit边界半径：3px； -moz边界半径：3px； 边界半径：3px； } .wordsAnimation{ -webkit动画持续时间：2秒； 动画持续时间：2秒； -webkit动画填充模式：两者都有； 动画填充模式：两者都有； } 帕芬先生{ -webkit动画名称：puffIn； 动画名称：海雀； } .消失{ -webkit动画名称：消失； 动画名称：消失； } @-webkit关键帧puffIn{ 0% { 不透明度：0； -webkit转换来源：50%50%； -webkit转换：scale2，2； -webkit过滤器：blur2px； } 100% { 不透明度：1； -webkit转换来源：50%50%； -webkit转换：scale1，1； -webkit过滤器：blur0px； } } @关键帧海雀{ 0% { 不透明度：0； 变换原点：50%50%； 变换：scale2，2； 过滤器：blur2px； } 100% { 不透明度：1； 变换原点：50%50%； 变换：scale1，1； 过滤器：blur0px； } } @-webkit关键帧消失在{ 0% { 不透明度：0； -webkit转换来源：50%50%； -webkit转换：scale2，2； -webkit过滤器：blur90px； } 100% { 不透明度：1； -webkit转换来源：50%50%； -webkit转换：scale1，1； -webkit过滤器：blur0px； } } @关键帧消失{ 0% { 不透明度：0； 变换原点：50%50%； 变换：scale2，2； -webkit过滤器：blur90px； } 100% { 不透明度：1； 变换原点：50%50%； 变换：scale1，1； -webkit过滤器：blur0px； } }

Puff-in

消失在

---

动画这里有一个奇怪的答案。我扩展了@tmach的答案，但是我没有使用setTimeout来删除类，而是强制使用一个。现在，可以按“动画”按钮在动画制作时重新启动动画

函数animateWords{ 让word1=document.getElementById'word1'； 让word2=document.getElementById'word2'； word1.classList.删除'puffIn'； 类列表。删除“消失”； word1.offsetWidth；/*Magic！强制回流*/ 单词1.类列表.添加'puffIn'； 单词2.类列表。添加“消失”； } p{ 显示：块； 浮动：左； 填充：1px； 背景：5c； 边框：2个实心f6f6f6； 颜色：f6f6f6； -webkit边界半径：3px； -moz边界半径：3px； 边界半径：3px； } .wordsAnimation{ -webkit动画持续时间：2秒； 动画持续时间：2秒； -webkit动画填充模式：两者都有； 动画填充模式：两者都有； } 帕芬先生{ -webkit动画名称：puffIn； 动画名称：海雀； } .消失{ -webkit动画名称：消失； 动画名称：消失； } @-webkit关键帧puffIn{ 0% { 不透明度：0； -webkit转换来源：50%50%； -webkit转换：scale2，2； -webkit过滤器：blur2px； } 100% { 不透明度：1； -webkit转换来源：50%50%； -webkit转换：scale1，1； -webkit过滤器：blur0px； } } @关键帧海雀{ 0% { 不透明度：0； 变换原点：50%50%； 变换：scale2，2； 过滤器：blur2px； } 100% { 不透明度：1； 变换原点：50%50%； 变换：scale1，1； 过滤器：blur0px； } } @-webkit关键帧消失在{ 0% { 不透明度：0； -webkit转换来源：50%50%； -webkit转换：scale2，2； -webkit过滤器：blur90px； } 100% { 不透明度：1； -webkit转换来源：50%50%； -webkit变换：缩放 1, 1; -webkit过滤器：blur0px； } } @关键帧消失{ 0% { 不透明度：0； 变换原点：50%50%； 变换：scale2，2； -webkit过滤器：blur90px； } 100% { 不透明度：1； 变换原点：50%50%； 变换：scale1，1； -webkit过滤器：blur0px； } }

Puff-in

消失在

---

设置动画帮助诊断问题的其余代码在哪里？您可以用在else-if中编写的语句替换最后一条else语句，然后删除else-if。感谢@RickardElimäa的评论。我觉得现在更好了…非常适合我的需要，谢谢你的帮助！没问题，如果你还有其他问题可以问。我们是来互相帮助的；