javascript - 自动调整显示幻灯片内容的高度

Question

我正在使用 Angular 和 Angular 动画来隐藏和显示具有向上/向下滑动效果的内容 - 类似于 jQuery 显示。

但是，当我有一张幻灯片时，这很有效。现在我有多个不同大小的，我如何调整代码以便自动计算和调整要显示的元素(div 或表单)的高度而不是预定义？

HTML:

<h2 ng-click="showSpoons = !showSpoons">Show Spoons +</h2>
<div ng-show="showSpoons" class="animate-slide-up">
  <p>Spoon</p><p>Spoon</p><p>Spoon</p>
  <p>Spoon</p><p>Spoon</p><p>Spoon</p>
  <p>Spoon</p><p>Spoon</p><p>Spoon</p>
  <p>Spoon</p><p>Spoon</p><p>Spoon</p>
</div>
<br>
<h2 ng-click="showForks = !showForks">Show Forks +</h2>
<div ng-show="showForks" class="animate-slide-up">
  <p>Fork</p><p>Fork</p><p>Fork</p>
  <p>Fork</p><p>Fork</p><p>Fork</p>
</div>
<br>
<h2 ng-click="showCups = !showCups">Show Cups +</h2>
<div ng-show="showCups" class="animate-slide-up">
  <p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
  <p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
  <p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
  <p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
  <p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p><p>Cups</p>
</div>

CSS:

.ng-hide-add, .ng-hide-remove {
    /* ensure visibility during the transition */
    display: block !important; /* yes, important */
}

.animate-slide-up {
    transition: .25s linear all;
    height: 10em;
    overflow: hidden;
}

.animate-slide-up.ng-hide {
    height:0;
}

笨蛋:https://plnkr.co/edit/t7oVw3n3oTxuPaPLo38a?p=preview

Answer 1

您几乎是在为幻灯片定义一个固定的 height 值。您可以使用 height: auto; 而不是使用固定值。这将根据幻灯片内容为您的幻灯片提供一个自动生成的高度值。所以基本上，您需要的是:

.animate-slide-up {
    transition: .25s linear all;
    height: auto;
    overflow: hidden;
}