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%，只是“让它”通过不限制它来获取 auto 值。

注意：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。