点击复制元素时通知提示首次生效后续不显示、opacity设置失效问题

• 你为#tooltiptext元素直接绑定了全局的CSS动画，动画首次运行结束后会永久保持opacity: 0的结束状态，且默认不会重复触发。后续你手动修改opacity = 1也不会让动画重新执行，因此提示无法再次显示。

方案1：调整动画触发逻辑（适配原有实现） #

这种方案可以保留你原本的CSS动画逻辑，同时支持多次触发：

1. 修改CSS代码，将动画绑定从ID选择器改为单独的触发类：

/* 保留原有#tooltiptext的基础样式，删掉原本的动画相关属性，新增以下类 */
.show-copied-tip {
  -moz-animation: cssAnimation 0s ease-in 5s forwards;
  /* Firefox */
  -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  /* Safari and Chrome */
  -o-animation: cssAnimation 0s ease-in 5s forwards;
  /* Opera */
  animation: cssAnimation 0s ease-in 5s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

2. 修改JS中的displayAlert方法，每次点击时重新触发动画：

const displayAlert = () => {
  copiedAlert.style.opacity = 1;
  // 先移除触发类重置状态
  copiedAlert.classList.remove('show-copied-tip');
  // 触发DOM重排，确保浏览器感知到状态变更，避免类名操作被合并导致失效
  void copiedAlert.offsetWidth;
  // 重新添加类触发动画
  copiedAlert.classList.add('show-copied-tip');
}

方案2：改用JS控制显隐（更简洁） #

如果不需要依赖CSS动画，直接用JS定时器控制显隐逻辑更简单，还能自动兼容连续点击的场景：

1. 删掉#tooltiptext选择器中所有动画相关的CSS属性，保留基础样式即可。
2. 修改JS中的displayAlert方法：

const displayAlert = () => {
  copiedAlert.style.opacity = 1;
  // 清除之前的定时器，避免多次点击导致提示提前隐藏
  clearTimeout(copiedAlert.hideTimer);
  // 显示5秒后自动隐藏提示
  copiedAlert.hideTimer = setTimeout(() => {
    copiedAlert.style.opacity = 0;
  }, 5000);
}

内容的提问来源于stack exchange，提问作者Prosy A.