Javascript 动画仅在第一次单击按钮时生效

我想创建简单的文本动画。当我单击按钮时，文本从完全透明变为完全可见，并恢复为透明。我写了一些代码来制作动画，但只写了一次。每次单击按钮时，动画不再工作：

函数动画（）{
$（“span”）.removeClass（“不透明效果”）；
$（“span”）.addClass（“不透明效果”）；
}

span{
不透明度：0；
}
.不透明效果{
动画名称：设置不透明度效果的动画；
动画持续时间：1400ms；
动画填充模式：正向；
不透明度：0；
}
@关键帧设置不透明度效果的动画{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

你好，世界！
启动动画

您需要重置动画。使用event

animationend

，有一种很好且正确的方法可以做到这一点。在这种情况下，需要删除类

不透明度效果

函数动画（）{
$（“span”）.addClass（“不透明效果”）；
$（“span”）。在（“animationend”，function（）上{
$（此）.removeClass（“不透明效果”）；
});
}

span{
不透明度：0；
}
.不透明效果{
动画名称：设置不透明度效果的动画；
动画持续时间：1400ms；
动画填充模式：正向；
不透明度：0；
}
@关键帧设置不透明度效果的动画{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

你好，世界！
启动动画

数据库中的下拉列表值
跨度{
不透明度：0；
}
.不透明效果{
不透明度：0；
-webkit动画：动画不透明效果1400ms无限；
-moz动画：动画不透明效果1400ms无限；
-o-动画：动画不透明效果1400ms无限；
动画：动画不透明度效果1400ms无限；
}
@关键帧设置不透明度效果的动画{
0%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：1；}
}
@-o关键帧设置不透明度效果的动画{
0%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：1；}
}
@-moz关键帧设置不透明度效果的动画{
0%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：1；}
}
@-webkit关键帧设置不透明度效果的动画{
0%{不透明度：1；}
50%{不透明度：0；}
100%{不透明度：1；}
}
你好，世界！
启动动画
函数动画（）{
$（“span”）.removeClass（“不透明效果”）；
$（“span”）.addClass（“不透明效果”）；
}

动画不会重复，因为在没有类的情况下，启动CSS的动画需要一个帧

所以，要解决这个问题，您应该延迟将类添加到下一帧

函数动画（）{
$（“span”）.removeClass（“不透明效果”）；
requestAnimationFrame（（）=>{
$（“span”）.addClass（“不透明效果”）；
});
}

您需要在

removeClass

和

addClass

之间添加一个小延迟。这可以通过两种方式实现：

设置超时

函数动画（）{
$（“span”）.removeClass（“不透明效果”）
设置超时（（）=>{
$（“span”）.addClass（“不透明效果”）；
}, 0);
}

span{
不透明度：0；
}
.不透明效果{
动画名称：设置不透明度效果的动画；
动画持续时间：1400ms；
动画填充模式：正向；
}
@关键帧设置不透明度效果的动画{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}

你好，世界！
启动动画

试试这个

---

1400是你的动画持续时间

我不是故意的。我想让这个动画在你每次按下按钮（但只有一次）时播放@AdamWróbel，我更新了解决方案，并用event

animationend

制作了它。此事件适用于类似于此任务的任务。检查一下，“完整的源代码”做什么？至少让它成为一个片段，这样我们就可以看到它的实际效果。请参阅：

$('span').addClass('opacity-effect');
setTimeout(function(){
 $('span').removeClass('opacity-effect');
}, 1400);