css实现折叠展开动画
在 CSS 中实现折叠展开动画需要使用一些布局和过渡属性。
<div class="accordion">
<div class="accordion-title">Hover me!</div>
<div class="accordion-body">
<div>
<p>Lorem ipsum ...</p>
</div>
</div>
</div>
如果将鼠标悬停在元素上,出现一个下拉菜单。但是如果我们想让它看起来有一个很好的平滑过渡怎么办?
.accordion-body {
height: 0;
transition: 500ms height ease;
}
.accordion:hover .accordion-body {
height: auto;
}
不幸的是,这不起作用:从height: 0过度到height: auto没有动画效果。
如何解决这个问题?
那么,第一个解决方案可能是将height属性设置为固定数字,而不是auto。
但这不是一个很好的方法:为了计算这个固定数字,我们必须求助于JavaScript,以便计算我们的.accordion-body实际高度。
但是我们希望只使用CSS来实现这个效果,既然height不行,我们为什么不直接使用max-height呢?
.accordion-body {
max-height: 0;
transition: 500ms max-height ease;
}
.accordion:hover .accordion-body {
max-height: 200px;
}
由于我们设置了一个固定值max-height,浏览器现在能够正常执行过度动画了。
唯一的问题是,由于我们设置了一个固定值max-height,但是内容可能会溢出。
如果您确定您的内容永远不会达到特定高度,那么使用此方法就完全没问题!只需为元素指定一个适当的值max-height就可以了。
但请注意,max-height的值越高,过渡就越奇怪(可以尝试将max-height: 1000px看看情况如何变化!)。
我们还有其他更好方案吗?可以避免任何固定值height/max-height吗?
我们实际上可以使用一个巧妙的技巧,使用CSS网格布局。
.accordion-body {
display: grid;
grid-template-rows: 0fr;
transition: 250ms grid-template-rows ease;
}
.accordion:hover .accordion-body {
grid-template-rows: 1fr;
}
.accordion-body > div {
overflow: hidden;
}
我们真正要做的就是grid-template-rows将其从0fr过渡到1fr:这样,我们的网格项将从 0 过渡到其“自然”高度。就这么简单。