如何在普通JS中实现jQuery的slideDown(),其高度未知

Question

我试图在普通JS中实现'滑动可见性与滑动'功能,如jQuery的slideDown().

我可以随着时间的推移动画值,没问题,但是当应该变得可见的元素的高度未知时,我该怎么办？

现有的样本解决方案似乎总是将最大高度值设置为固定值,但我需要设置以前未知值(高度)的动画.

(如果有一种方法可以用css3实现这一点,我也会很好奇!)

Answer 1

将元素的高度设置为0,隐藏溢出,以及处理动画的CSS3过渡:

.container {
  height: 0px;
  overflow: hidden;
  transition: all 1000ms;
}

然后,您可以根据以下内容轻松地为元素设置动画scrollHeight:

var container= document.querySelector('.container');
container.style.height= container.scrollHeight + 'px';

片段

document.querySelector('button').addEventListener('click', function() {
  var container= document.querySelector('.container');
  container.style.height= container.scrollHeight + 'px';
});

.container {
  font: 24px verdana;
  background: #dfd;
  height: 0px;
  overflow: hidden;
  transition: all 1000ms;
}

<button>
 Slide Down
</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

小提琴