Question

您好！

我尝试了很多方法来改进这个，例如：删除旧的，然后添加新的类，它不起作用。我试图切换课程，它也不起作用。也许它可以以不同的方式完成，但我不知道如何。最后问题是：如何使这个div的消失顺利，没有任何框架可取？

抱歉我的英文不好

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

只需使用opacity即可，因为您无法transition visibility个值，这同样适用于典型的display: none / {{ 1}}组合：

＆＃13;

display: block

＆＃13;

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");
});

＆＃13;

.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;
}

＆＃13;

按钮/ div消失的平滑动画

1 个答案: