实现淡入淡出效果的最佳方式是使用css过渡。

需要注意的一点是，如果您在display: block和display: none之间切换，那么css转换将不起作用，因此您需要考虑使用visibility或opacity属性。

以下是工作代码：

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

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

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

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

# wrap {

  position: relative;
  opacity: 0;
  transition: opacity 0.5s linear;
  height: 0; /* add this if you want it to take no space */
}

# wrap.active {

  opacity: 1;
}

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

<a class="btn" href="#none">Click</a>

<div id="wrap">
  <div class="contents">
    Active Contents!
  </div>
</div>

您可以使用opacity而不是display来实现这一点，如下所示：

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

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

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

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

# wrap {

    position: relative;
    opacity: 0;
    transition: opacity 1s; 
}

# wrap.active {

    opacity: 1;
    transition: opacity 1s;
}

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

<a class="btn" href="#none">Click</a>

    <div id="wrap">
        <div class="contents">
            Active Contents!
        </div>
    </div>