javascript - div 的 CSS 过渡没有动画效果

Question

当我单击一个 div 时，我希望第二个 div 展开/折叠。这是使用 JS、HTML 和 CSS 完成的。现在我想让 CSS 过渡动画化。

现在我得到的只是一个跳跃的展开和一个滚动(Edge)或等待后的一个跳跃(Chrome、Opera、Firefox)。

我尝试将高度设置为 1px 而不是 0px，但这并没有改变任何东西。

function growDiv(id) {
  var ele = document.getElementById(id);
  if (ele.style.height == '100%') {
    ele.style.height = '0px';
  } else {
    ele.style.height = '100%';
  }
}

.main {
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.secondary {
  -webkit-transition: height .5s ease;
  -moz-transition: height .5s ease;
  -ms-transition: height .5s ease;
  -o-transition: height .5s ease;
  transition: height .5s ease;
  overflow: hidden;
  padding-left: 20px;
  height: 0px;
  cursor: pointer;
}

<div class="main" onclick="growDiv('expandable')">
  Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
  number1,
  <br>number2,
  <br>number3,
  <br>number4.
</div>

Codepen 的行为与我所知道的整个站点的行为一样，因此可以很好地衡量；这是代码笔:http://codepen.io/anon/pen/ezJQjM

Answer 1

来自 http://css3.bradshawenterprises.com/animating_height/ 不要使用 100%，只是“让它”通过不限制它来获取自动值。

注意:100px 只是“大于实际大小的任何数字”

function growDiv(id) {
  var ele = document.getElementById(id);
  if (ele.style.maxHeight != '0vh') {
    ele.style.maxHeight = '0vh';
  } else {
    ele.style.maxHeight = "100vh";
  }
}

.main {
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.secondary {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  overflow: hidden;
  padding-left: 20px;
  cursor: pointer;
}

<div class="main" onclick="growDiv('expandable')">
  Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
  number1,
  <br>number2,
  <br>number3,
  <br>number4.
</div>

编辑:将所有内容更改为 VH(视口(viewport)高度)，因此它永远不会增长到超过屏幕高度的 100%，并且会适应任何屏幕的最大高度。 还将“style="max-height: 0vh;"切换为元素本身而不是类，因此如果需要，您可以使用 ele.style 取消设置它(否则您将需要设置一个新值来覆盖类。