P粉5295811992023-09-01 15:18:03
解决方案非常简单。我将我的网格放入另一个网格中。然后我简单地使用 fr 作为调整主网格所在 div 上的行大小的方法。这导致了将网格行从 0fr 转换为 1fr 的可能性。就是这样。
.toggle {
width: 100%;
}
.grid {
display: grid;
width: 20%;
border: solid black 2px;
}
.div1 {
grid-column: 1;
grid-row: 1;
}
.div2 {
grid-column: 2;
grid-row: 1;
}
.wrapper {
grid-column: 1 / 3;
grid-row: 2;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 200ms;
}
.div3 {
grid-column: 1;
grid-row: 1;
min-height: 0;
}
.div4 {
grid-column: 2;
grid-row: 1;
min-height: 0;
}
.toggle:checked ~ .grid > .wrapper {
grid-template-rows: 1fr;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Website</title>
</head>
<body>
<input class="toggle" type="checkbox">
<div class="grid">
<div class="div1">Hello</div>
<div class="div2">Hello2</div>
<div class="wrapper">
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</div>
</body>
</html>
此外，如果您的网格中有不同大小的不同行。例如，一个为 0.05fr，一个为 1fr，动画将变得“滞后”。您可以做的就是将包装网格放入另一个包装网格中。然后，您不会使用实际行来为该网格设置动画，而是使用相同的方法为第一个网格的子级或实际网格的父级设置动画。
这是一种奇怪的解决方法，但它是解决问题的一种方法，而无需重做太多。