切换div以进行显示，并通过Javascript或CSS缓慢隐藏

问题描述

我开始使用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>

希望您能提供帮助！ ：）

解决方法

长话短说： 您无法为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，而应使用一个类
• 如果默认情况下您的div是可见的，则您的标签应显示“ Verstecke功能”，以便用户知道您的按钮将执行的操作

,

HTML：

i++

CSS：

<!--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>

JS：

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

div.hidden {
  height: 0;
}