Javascript 为同一元素在单击按钮时设置动画效果

我有类似这样的事。H1标记根据按钮点击动态显示数据

    <div id="quoteId" >
          <h1>{{ data }}</h1>
        </div>
<button>Show Next</button>

---

这是第一次工作。但问题是如何在每次单击按钮时实现相同的css效果。如有任何疑问，请告诉我。提前感谢。

您可以像这样重复使用动画：

let but=document.getElementById（“按钮”）；
设div=document.getElementById（“quoteId”）；
但是.addEventListener（'click'，function（）{
div.classList.添加（“报价”）；
setTimeout（（）=>div.classList.remove（“引号”），1000；
});
.quote{
不透明度：1；
动画名称：示例；
动画持续时间：1s；
}
@关键帧示例{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：1；}
}

{{data}}
用jQuery显示下一步：
A）

$("#quoteId").toggleClass('anime reve');


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#quoteId”）.toggleClass（'anime reve'）；
})
})
.anime{
动画名称：示例；
动画持续时间：5s；
}
雷夫先生{
动画名称：reve；
动画持续时间：5s；
}
@关键帧示例{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：1；}
}
@关键帧显示{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：1；}
}

{{data}}
显示下一步
仅当按下按钮时，才会应用
：活动
选择器。当你松开按钮时，动画就会停止。我知道，所以没有更好的方法使用纯css。使用jQuery方法。
$("#quoteId").toggleClass('anime reve');