css - CSS 中的动态高度动画

Question

在尝试了以下技术之后，我仍然对如何在 CSS 中为元素的高度设置动画感到困惑。

max-height 方法 JSFiddle

对于我来说，这并不好，因为所有元素都有不同的高度。此外，您会注意到在高度开始动画回到 0px 之前会有轻微的延迟。当元素的高度(比如 50 像素)远小于动画中设置的 500 像素 max-height 时，就会发生这种情况。

transform 方法 JSFiddle

同样，这对我的情况没有好处，因为您可以看到它没有像 max-height 方法那样显示更多/更少的元素。这种方法更适用于具有不同高度的不同元素，但你可以看到它是从上到下旋转的。 scaleY方法也存在同样的问题。

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

Answer 1

我已经为你的 ul 设置了一个包装器

并且我已经在 Y 轴上对 wrapper 和 ul 进行了变换，一个向上，另一个在相反的方向。将变换量设置为 100% 可使其精确调整到元素的尺寸。

因此，它是一种逐步显示内容的滑动门。

此技术成功的关键是 2 个元素具有相同的高度。我已经将 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>

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