Question

我正在使用角度和角度动画来隐藏和显示带有上下滑动效果的内容 - 类似于jQuery show。

然而，当我有一张幻灯片时，这种方法效果很好。现在我有多个，具有不同的大小，我如何调整代码，以便显示（div或form）元素的高度是自动计算和调整而不是预定义？

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;
}

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

2 个答案: