javascript - 如何实现像jQuery 的slideDown 一样的向下滑动效果，但只使用CSS？

Question

CSS3 动画有问题。它们不支持“自动”高度属性(以及宽度、边距等)。在不知道元素确切高度的情况下创建 CSS3 向下滑动动画的最佳方法是什么？

问题类似于this一个，但是那里接受的答案没有回答实际问题，因为它们没有处理计算您希望滑动的元素的高度的问题。

Answer 1

你看过我根据那个答案挖出来的这个演示吗？
我尝试自己编写，但似乎没有用。

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});

#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

View on jsFiddle