我正在尝试使用 CSS 制作一个动画下拉/可扩展组件。我目前有一个扩展和折叠的类,实现如下:
.expanded {
margin-top: 0;
}
.collapsed {
margin-top: -100%;
}
但是,当我实际根据当前下拉状态分配这些类时,似乎
-100%
相当于我元素的 width的
-100%
,而不是我想要的高度。这意味着当我的元素高度大于宽度时,下拉菜单不会完全折叠。有什么方法可以更改 %
单位引用的维度吗?
如果没有,什么是更好的方法来动画容器的展开/折叠?
折叠元素的计算尺寸图像(带有
margin-top: -100%
):
你的处理方式有点奇怪。我要么使用标准的最大高度方式。或者最好的方法,网格。
.dropdown {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease-out;
}
.expanded {
max-height: 500px;
}
这种方法很简单,但有一个局限性;您需要知道或估计您的内容所需的最大高度。
要获得更动态、更整洁的解决方案,请使用 grid-template-rows
.container {
display: grid;
grid-template-rows: 0fr auto;
transition: grid-template-rows 0.5s ease-out;
}
.container.expanded {
grid-template-rows: 1fr auto;
}