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

Question

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

但是，当我有一张幻灯片时，这效果很好。现在我有多个大小不同的代码，我该如何调整代码，以便自动计算和调整要显示的元素（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;
}

Plunker：https://plnkr.co/edit/t7oVw3n3oTxuPaPLo38a?p=preview

Answer 1

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

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

Answer 2

plnkr

使用这个，

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