CSS中的动态高度动画

Question

尝试了以下技术后，我仍然不知道如何在CSS中动画化元素的高度。 max-height方法JSFiddle 对于我的情况，这种方法不好，因为所有元素的高度都不同。此外，在高度开始向上动画回到0px之前会有轻微的延迟。当一个元素的高度比动画中设置的500pxmax-height小得多（比如50px）时，就会出现这种情况。 transform方法JSFiddle 同样，对于我的情况来说也不好，因为你可以看到它并没有像max-height方法那样显示更多/更少的元素。这种方法更适用于高度不同的元素，但你可以看到它是从上到下旋转的。scaleY方法也有同样的问题。

因此，您可以看到我需要动画从上到下显示元素。此外，动画在鼠标悬停和移开时应该没有延迟显示/隐藏元素。

- Enijar

---

不，我不想使用JavaScript来完成这个。 - Enijar

万一你改变了主意 https://jsfiddle.net/aordxzha/3/. - Nenad Vracar

为什么 scale 不起作用？https://jsfiddle.net/aordxzha/4/? - Nenad Vracar

提到的所有方法都是可行的，只是它们不能满足我所寻找的需求。请参见我问题中的最后一段。 - Enijar

Answer 1

我已经在你的ul周围设置了一个包装器，并在Y轴上转换了包装器和ul，其中一个向上，另一个相反方向。将变换量设置为100％使其完全适应元素的尺寸。

因此，它就像一扇滑动门，逐渐展示内容。

对于这种技术的成功来说，两个元素具有相同的高度非常重要。我已经将ul的默认边距转移到了包装器上。

.wrap {
 margin: 10px;
 overflow: hidden;
 transform: translateY(-100%);
 transition: transform 1s linear;
 position: relative;
}

.wrap ul {
 margin: 0px;
 transform: translateY(100%);
 transition: inherit;
}

.trigger:hover  .wrap {
 transform: translateY(0%);
}
.trigger:hover  .wrap ul {
 transform: translateY(0%);
}

.trigger ~ .trigger {
  margin-left: 200px;
  }

<div class="trigger"> Hover
<div class="wrap">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div class="trigger"> Hover
<div class="wrap">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</div>
</div>

请注意，悬停区域有点棘手。但是我没有花太多时间解决这个问题，因为我了解到这不是你想要的关键。

- vals