如何用JavaScript实现按钮触发文本淡入？已有按钮函数的修改咨询

你的核心问题在于：直接切换display: none/block会让浏览器跳过过渡动画——因为display: none的元素根本不会被渲染，CSS transition自然无法生效。结合你已有的CSS代码，我们可以通过切换类名的方式实现平滑的淡入淡出，不用新增函数，改改现有myFunction就搞定。

第一步：调整CSS规则（适配过渡逻辑） #

如果你的#myDIV初始需要隐藏，先把基础样式改成这样：

#myDIV {
  opacity: 0;
  visibility: hidden; /* 可选，防止隐藏时元素占空间或被误点 */
  transition: opacity 0.7s ease; /* 统一过渡规则，不用重复写 */
}

#myDIV.show {
  opacity: 1;
  visibility: visible;
}

要是初始状态是显示的，就把基础样式设为opacity:1; visibility:visible;，隐藏类设为opacity:0; visibility:hidden;就行。

第二步：修改现有点击函数 #

删掉直接操作display的逻辑，改成切换类名：

const myFunction = () => {
  const x = document.getElementById("myDIV");
  x.classList.toggle("show"); // 一键切换show类，自动处理显示/隐藏
};

要是想用你原来的.fade类，这么改也行 #

把CSS里的.fade类调整为隐藏状态，函数里切换这个类：

#myDIV {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

#myDIV.fade {
  opacity: 0;
  visibility: hidden;
  /* 删掉transition:none，保持统一过渡规则才能触发动画 */
}

对应的函数修改：

const myFunction = () => {
  const x = document.getElementById("myDIV");
  x.classList.toggle("fade");
};

这样改完点击按钮，就能看到平滑的淡入淡出效果啦！

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