通過 Javascript 或 CSS 慢慢切換顯示和隱藏的 div

Question

我用 Javascript 邁出了第一步。現在我遇到了 animation 的問題。我的代碼目前正在正常工作。 但我無法弄清楚如何讓 div 緩慢而不是立即地“扮演”“角色”。

這是我到現在為止收到的。 試圖把.style.transition = "all 2s"; 后面var x = document.querySelectorAll("#toggle-div"); 像這樣var x = document.querySelectorAll("#toggle-div").style.transition = "all 2s"; 但它並沒有真正起作用。

我希望每個單獨的 div（3 個 div）切換緩慢而不是像快照一樣。

這是我的代碼目前的樣子：

 // Toggle all buttons texts function change() { var x = document.querySelectorAll("#button"); var i; for (i = 0; i < x.length; i++) { if (x[i].value == "Zeige Features") { x[i].value = "Verstecke Features"; } else { x[i].value = "Zeige Features"; } } } // Toggle show and hide divs function showhide() { var x = document.querySelectorAll("#toggle-div"); var i; for (i = 0; i < x.length; i++) { if (x[i].style.display === "block") { x[i].style.display = "none"; } else { x[i].style.display = "block"; } } }

 <;--Inserting 3 buttons--> <input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input> <input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input> <input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input> <!--Inserting 3 divs--> <div id="toggle-div"> div 1 </div> <div id="toggle-div"> div 2 </div> <div id="toggle-div"> div 3 </div>

希望你能幫忙: :)

Answer 1

長話短說：您不能為 HTML 元素的display屬性設置動畫。 請改用opacity屬性。

此答案中的其他解決方案。

 // Toggle all buttons texts function change(button) { var x = document.querySelectorAll(".button"); for (let i = 0; i < x.length; i++) { if (x[i].value == "Zeige Features") { x[i].value = "Verstecke Features"; } else { x[i].value = "Zeige Features"; } } } // Toggle show and hide divs function showhide() { var x = document.querySelectorAll(".toggle-div"); for (let i = 0; i < x.length; i++) { if (x[i].style.opacity === "0") { x[i].style.opacity = "1"; } else { x[i].style.opacity = "0"; } } }

 <:-- Inserting default transition for divs --> <style> div { transition. 0;5s; } </style> <;--Inserting 3 buttons--> <input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input> <input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input> <input onclick="change();showhide()" type="button" value="Verstecke Features" class="button"></input> <!--Inserting 3 divs--> <div class="toggle-div"> div 1 </div> <div class="toggle-div"> div 2 </div> <div class="toggle-div"> div 3 </div>

一些附加信息：

• 不要給多個 HTML 標簽相同的 ID，改用 class
• 如果你的 div 默認是可見的，你的標簽應該說“Versteckere Features”，這樣用戶就知道你的按鈕會做什么

Answer 2

HTML：

<!--Inserting 3 buttons-->

<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>
<input onclick="change();showhide()" type="button" value="Zeige Features" id="button"></input>

<!--Inserting 3 divs-->

<div class="toggle-div">div 1</div>
<div class="toggle-div">div 2</div>
<div class="toggle-div">div 3</div>

CSS：

div.toggle-div {
  transition: 1s ease-out;
  height: 50px;
  overflow: hidden;
}

div.hidden {
  height: 0;
}

記者：

function change() {
  var x = document.querySelectorAll("#button");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].value == "Zeige Features") {
      x[i].value = "Verstecke Features";
    } else {
      x[i].value = "Zeige Features";
    }
  }
}

// Toggle show and hide divs

function showhide() {
  var x = document.querySelectorAll(".toggle-div");
  for (var i = 0; i < x.length; i++) {
    x[i].classList.toggle('hidden');
  }
}