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（视口高度），因此它永远不会超过屏幕高度的100%，并且将适应任何屏幕的最大高度。还将"style="max-height： 0vh;"切换到元素本身而不是类，因此如果需要，您可以使用ele.style取消设置它（否则您将需要设置一个新值来覆盖类。

Answer 2

你愿意使用 jQuery 吗？它提供了一些很酷的动画可能性，并可能完成您正在尝试做的事情。这只是您的方法的可能替代方案。

在这里查看我的小提琴：

https://jsfiddle.net/3mo28z1t/11/

<div class="main" id="clicker">
  Expand
</div>
<div class="secondary" id="expandable">
  number1, <br> number2, <br> number3, <br> number4.
</div>
<script>
 $( document ).ready(function() {
$(".secondary").hide();
$(document).ready(
    function(){
        $("#clicker").click(function () {
            $(".secondary").toggle("slow");
        });
    });   
});
</script>

Answer 3

该问题是由切换度量单位引起的，因此从像素切换到百分比。不过，我可能会做得有点不同。

growDiv = function(id) {
  document.getElementById(id).classList.toggle('expanded');
}

.main {
  font-weight: 700;
  overflow: hidden;
  cursor: pointer;
}
.secondary {
  transition: max-height .5s ease;
  overflow: hidden;
  padding-left: 20px;
  max-height: 0;
  cursor: pointer;
}
.secondary.expanded {
  height: 100%;
  max-height: 100px;
}

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

你会注意到JS更简单一些，它更多地依赖于CSS。