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