通过 Javascript 或 CSS 慢慢切换显示和隐藏的 div

Question

我迈出了 Javascript 的第一步。现在我有一个动画问题。我的代码目前正在正常工作。但我不知道如何让 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 属性。

this answer.

中的其他解决方案

// 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 功能”，以便用户知道您的按钮将做什么

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

JS:

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

通过 Javascript 或 CSS 慢慢切换显示和隐藏的 div

Toggle the divs for show and hide slowly via Javascript or CSS

javascript

animation

show

toggle

hide