动画元素悬停时的高度

Question

我正在尝试动画一些元素的高度在悬停。我使用了max-height如您所见，要操作动画:

.container {
height: auto;
}
.hiddenContent {
max-height: 0px;
overflow: hidden;
transition: max-height 1s ease;
}
.container:hover>.hiddenContent {
max-height: 250px;
transition: max-height 1s ease;
}

<div class="container">
<h2>Hover me to expand</h2>
<div class="hiddenContent">
<h4>Hidden title</h4>
<p>Hidden content lorem ipsum sid dolor amet</p>
</div>
</div>
<div class="container">
<h2>Hover me to expand</h2>
<div class="hiddenContent">
<h4>Hidden title</h4>
<p>Hidden content lorem ipsum sid dolor amet</p>
</div>
</div>
<div class="container">
<h2>Hover me to expand</h2>
<div class="hiddenContent">
<h4>Hidden title</h4>
<p>Hidden content lorem ipsum sid dolor amet</p>
</div>
</div>

当我从一个元素导航到另一个元素时，问题出现了:2个动画(开始一个和结束一个)不是同时出现的。当开场结束时，结束就开始了。我怎么解决这个问题?

谢谢

Answer 1

这是因为你设置了max-height动画。下面是我找到的一个很好的解释:

CSS过渡同步

尝试动画高度

.container {
height: auto;
}
.hiddenContent {
height: 0px;
overflow: hidden;
transition: height 1s ease;
}
.container:hover .hiddenContent {
height: 150px;
transition: height 1s ease;
}