如何实现像jQuery的slideDown一样的滑动效果,但只使用CSS？

Question

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

问题类似于这个问题,但是那里接受的答案并没有回答实际问题,因为它们没有处理计算你想要滑动的元素高度的问题.

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>

在 jsFiddle 上查看