javascript - 为同一元素设置按钮点击动画效果

Question

我有这样的 div。 H1 标签根据按钮点击动态显示数据。

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

使用css3动画效果作为

#quoteId {
    opacity: 1;
    animation-name: example;
    animation-duration: 1s;
}
@keyframes example {
    0%   {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}

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

Answer 1

你可以像这样重用动画:

let but = document.getElementById("button");
let div = document.getElementById("quoteId");
but.addEventListener('click', function(){
    div.classList.add("quote");
    setTimeout(() => div.classList.remove("quote"), 1000);
});

.quote {
    opacity: 1;
    animation-name: example;
    animation-duration: 1s;
}
@keyframes example {
    0%   {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}

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