如何为点击切换显示的JavaScript脚本添加淡入淡出效果？

你当前的代码用display: none/block切换元素显示状态，这种方式无法实现过渡动画，因为display属性是瞬间变化的，不支持CSS过渡。下面提供两种可行的修改方案：

方案一：基础淡入淡出（隐藏时仍占空间） #

这种方式实现简单，适合不需要严格控制页面布局空间的场景：

修改后的CSS #

a {
  color: black;
  text-decoration: none;
}

.btn {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
}

#wrap {
  position: relative;
  /* 初始状态：透明且不可交互 */
  opacity: 0;
  visibility: hidden;
  /* 添加过渡动画，0.3秒平滑过渡 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#wrap.active {
  /* 激活状态：完全可见 */
  opacity: 1;
  visibility: visible;
}

.contents {
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 30px;
  border: 1px solid #555;
}

JS代码无需修改 #

const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');

toggleBtn.addEventListener('click', () => {
  activeOn.classList.toggle('active');
});

说明：通过opacity控制透明度实现淡入淡出，visibility确保元素隐藏时无法被点击，过渡动画会平滑切换这两个属性。但隐藏状态下元素仍会占据页面空间。

方案二：淡入淡出+完全隐藏不占空间 #

如果需要元素隐藏时完全不占用页面空间，需要结合JS监听过渡结束事件，配合display属性切换：

修改后的CSS #

a {
  color: black;
  text-decoration: none;
}

.btn {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
}

#wrap {
  position: relative;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#wrap.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

.contents {
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 30px;
  border: 1px solid #555;
}

修改后的JS代码 #

const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');

toggleBtn.addEventListener('click', () => {
  if (activeOn.classList.contains('active')) {
    // 执行淡出：先移除激活类，动画结束后隐藏元素
    activeOn.classList.remove('active');
    activeOn.addEventListener('transitionend', () => {
      activeOn.style.display = 'none';
    }, { once: true });
  } else {
    // 执行淡入：先显示元素，再触发过渡动画
    activeOn.style.display = 'block';
    // 强制浏览器重绘，避免过渡不生效
    void activeOn.offsetWidth;
    activeOn.classList.add('active');
  }
});

说明：淡入前先设置display: block，再添加激活类触发透明度过渡；淡出时先移除激活类，等动画结束后再设置display: none，既实现平滑过渡，又保证隐藏时不占空间。void activeOn.offsetWidth是强制浏览器重绘，确保过渡动画正常触发。

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