CSS中的动态高度动画

2019年7月20日 598次阅读

在尝试以下技术之后,我仍然坚持如何在CSS中设置元素高度的动画.

最大高度方法JSFiddle

对于我的情况,这并不好,因为所有元素都有不同的高度.此外,在高度开始动画回到0px之前,您会注意到一点延迟.当元素的高度比动画中设置的500px最大高度小得多(比如说50px)时会发生这种情况.

变换方法JSFiddle

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

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

最佳答案 我在你的ul周围设置了一个包装器

我已经在Y轴上转换了包装器和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>

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

点赞