javascript - 每次用户单击时如何重播此CSS动画？

我创建了一个显示文本“已复制！”的按钮。每次用户单击“复制”按钮时。我完成此操作的方法是将动画分配给相关标签，并使用setTimeout来“重置”动画。这样，当用户第二次或第三次单击按钮时，动画将再次播放。

但是，我确定这不是理想的解决方案，因为如果用户在setTimeout完成之前单击，则按钮“断开”直到经过2500ms。之后，它又可以工作了。

如何重构CSS / JS，以便“复制！”每次单击按钮时都会显示消息？ （不受超时限制/延迟）

  const copyURL = () => {
    const copyDiv = document.querySelector(".copyAlert")
    copyDiv.textContent = "Copied!";
    copyDiv.style.animationName = "disappear";
    copyDiv.style.animationDuration = "2.5s";
    setTimeout(function(){
    copyDiv.style.animationName = "none";
    }, 2400);

  };

.copyAlert {
  opacity: 0;
}

@keyframes disappear {
  30% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

<button onclick="copyURL()">Copy</button>

<span class="copyAlert"></span>

最佳答案

1）使用animationend事件
2）使用animate类进行动画处理
3）不要使用JS插入“已复制！”文字，只需将其写在您的html中

const copyURL = () => {
  const copyDiv = document.querySelector('.copyAlert:not(.animate)')
  if(copyDiv) {
    copyDiv.classList.add('animate');
    copyDiv.addEventListener('animationend', () => copyDiv.classList.remove('animate') );
  }
};

.animate { animation: disappear 2.5s linear; }

.copyAlert { opacity: 0; }

@keyframes disappear {
  30%  { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

<button onclick="copyURL()">Copy</button>
<span class="copyAlert">Copied!</span>