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

Automatically Adjust Height Showing Slide Content

本文关键字：高度 幻灯片 调整 显示      更新时间：2023-09-26

我正在使用角度和角度动画来隐藏和显示具有向上/向下滑动效果的内容 - 类似于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;
}

普伦克：https://plnkr.co/edit/t7oVw3n3oTxuPaPLo38a?p=preview

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

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

plnkr

使用这个，

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