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

我用Javascript迈出了第一步。现在我有一个动画的问题。我的代码目前正在正常工作。但是我不知道我如何才能慢慢地而不是立即地把这些角色变成一个角色

这是我到现在为止收到的。尝试放置

.style.transition=“所有2”隐藏
var x=document.queryselectoral（#toggle div”）像这样
var x=document.queryselectoral（“#toggle div”）.style.transition=“all 2s”但它实际上不起作用

我想，每一个单一的分区（3个分区）切换缓慢，而不是像一个快照

下面是我的代码目前的样子：


//切换所有按钮文本
函数更改（）{
var x=document.queryselectoral（“按钮”）；
var i；
对于（i=0；i


第一组
第2组
第3部分
长话短说：
无法设置HTML元素的
显示
属性的动画。改用
不透明度
属性

中的其他解决方案


//切换所有按钮文本
功能更改（按钮）{
var x=document.querySelectorAll（“.button”）；
for（设i=0；i


div{
过渡：0.5s；
}
第一组
第2组
第3部分
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>

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

JS:

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

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

函数更改（）{
var x=document.queryselectoral（“按钮”）；
var i；
对于（i=0；i
谢谢您的回复！我想我会遇到的问题是，div仍然存在。因为我需要一个负责任的布局，用户可以在手机上显示他们想要的功能，这个解决方案仍然会显示div，对吗？只是他们有点“隐藏”！？有没有办法像手风琴一样完全关闭和打开它们？那太棒了！感谢您的快速帮助！：）嘿，谢谢。这是一个好的开始！当我第一次展示和隐藏这些div时，我不得不做一些变通。但在你的帮助下我成功了！非常感谢！：）