每次用户单击时如何重播此CSS动画?

问题描述 投票:0回答:1

我创建了一个按钮,显示文本“已复制!”每次用户单击“复制”按钮时。我完成此操作的方法是将动画分配给相关标签,还使用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>
javascript css
1个回答
0
投票

1)使用animationend事件2)使用animate类进行动画制作3)不要使用JS插入“已复制!”文字,只需将其写在您的html

© www.soinside.com 2019 - 2024. All rights reserved.