javascript - 如何避免可见性的瞬间转变

Question

我尝试了很多方法来达到预期的效果，例如删除一个类然后添加一个新类，也尝试切换一个类，但对我来说都不起作用。也许可以用不同的方式来完成，但我不知道该怎么做。所以问题是:如何在定义的时间段内使从可见到隐藏的过渡更平滑，反之亦然？

let trigger = document.querySelector("#reset");
let show = document.querySelector("#show");

trigger.addEventListener("click", function() {
  trigger.classList.replace("show", "hidden");
});

show.addEventListener("click", function() {
  trigger.classList.replace("hidden", "show");
});

.grid {
  box-shadow: 0 0 0 8px rgba(255, 213, 79, 0.50);
  font-size: 50px;
  border-radius: 5%;
  padding-top: 3%;
  padding-bottom: 3%;
  text-align: center;
  width: 30%;
  background-color: #ffd54f;
  float: left;
  margin: 1.66%;
  transition: all 0.5s;
}

.grid:hover {
  box-shadow: 0 0 0 15px rgba(255, 213, 79, 0.50);
  background-color: #FFC107;
}

.grid:active {
  border-width: 3px;
  background-color: #FFA000;
}

.hidden {
  transition: all 0.5s;
  visibility: hidden;
}

.show {
  transition: all 0.5s;
  visibility: visible;
}

<div id="reset" class="grid show">Hide</div>
<button id="show">show again</button>

Answer 1

由于hidden 和visible 不是数字 或可计算值，因此不能动画，你将不得不接受 opacity property 的 0 和 1:

let trigger = document.querySelector("#reset");
let show = document.querySelector("#show");

trigger.addEventListener("click", function() {
  trigger.classList.replace("show", "hidden");
});

show.addEventListener("click", function() {
  trigger.classList.replace("hidden", "show");
});

.grid {
  box-shadow: 0 0 0 8px rgba(255, 213, 79, 0.50);
  font-size: 50px;
  border-radius: 5%;
  padding-top: 3%;
  padding-bottom: 3%;
  text-align: center;
  width: 30%;
  background-color: #ffd54f;
  float: left;
  margin: 1.66%;
  transition: all 0.5s;
}

.grid:hover {
  box-shadow: 0 0 0 15px rgba(255, 213, 79, 0.50);
  background-color: #FFC107;
}

.grid:active {
  border-width: 3px;
  background-color: #FFA000;
}

.hidden {
  transition: all 0.5s;
  /*visibility: hidden;*/
  opacity: 0;
}

.show {
  transition: all 0.5s;
  /*visibility: visible;*/
  opacity: 1;
}

<div id="reset" class="grid show">Hide</div>
<button id="show">show again</button>