如何实现指定元素定时切换display状态并解决CSS动画不生效问题

1. 实现元素显示指定时长后自动隐藏 #

你可以通过setTimeout实现延迟隐藏逻辑，为了避免多次点击导致定时器冲突，建议提前存储定时器ID，每次触发点击时先清空未执行的定时器：
修改后的JS代码如下：

// 存储定时器ID，避免多次点击冲突
let hideClipboardTimer = null;
const clipboardTip = document.getElementById('clipboard-text');

clipboardButton.addEventListener('click', () => {
  let text = document.getElementById('display-text').innerHTML
  if (!text) return
  navigator.clipboard.writeText(text);
  
  // 显示提示元素
  clipboardTip.style.display = "block"
  
  // 清空之前未执行的隐藏定时器
  if (hideClipboardTimer) clearTimeout(hideClipboardTimer)
  // 2000为显示时长，单位是毫秒，可自行替换为需要的x秒对应的数值
  hideClipboardTimer = setTimeout(() => {
    clipboardTip.style.display = "none"
  }, 2000)
})

2. 动画不生效的原因及修复 #

核心原因 #

display属性不支持CSS过渡/动画：当元素设置为display: none时会直接从浏览器渲染树中移除，不存在中间过渡状态，所以绑定在display切换上的动画不会生效。

修复方案 #

推荐用opacity+visibility组合替代display实现显示隐藏，这两个属性都支持CSS过渡，同时可以保留元素的渲染节点：
修改后的CSS代码如下：

#clipboard-text {
  font-size: 14px;
  color: #05B1DB;
  /* 替换display: none */
  opacity: 0;
  visibility: hidden;
  /* 自定义过渡动画时长和效果 */
  transition: all 0.3s ease;
  /* 如果需要隐藏时不占用页面空间，可以新增以下两行，同时在show类里设置对应高度 */
  /* height: 0;
  overflow: hidden; */
}

/* 新增显示状态类 */
#clipboard-text.show {
  opacity: 1;
  visibility: visible;
  /* 如果上面加了高度限制，这里补充对应高度：height: 20px; */
}

对应的JS逻辑修改为切换类即可：

let hideClipboardTimer = null;
const clipboardTip = document.getElementById('clipboard-text');

clipboardButton.addEventListener('click', () => {
  let text = document.getElementById('display-text').innerHTML
  if (!text) return
  navigator.clipboard.writeText(text);
  
  // 移除类后触发重绘，保证每次点击都会重新播放动画
  clipboardTip.classList.remove('show');
  void clipboardTip.offsetWidth;
  clipboardTip.classList.add('show');
  
  if (hideClipboardTimer) clearTimeout(hideClipboardTimer)
  hideClipboardTimer = setTimeout(() => {
    clipboardTip.classList.remove('show');
  }, 2000)
})

内容的提问来源于stack exchange，提问作者Juan Andrade