如何制作网格布局扩展的动画？
P粉937382230
2023-08-31 21:09:37
<p>我想知道如何为网格布局的扩展设置动画。正如你在代码中看到的，我有 4 个 div。其中两个会显示，另外两个仅在选中该复选框时才显示。</p>
<p>选中该复选框后，将添加另一行，其中包含 div3 和 div4。我如何使扩展动画化？最好保持网格的大小。我不希望动画影响（不存在的）边距。我也想在没有 JavaScript 的情况下做到这一点。可能吗？</p>
<pre class="brush:php;toolbar:false;"><!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="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">.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;
}
.div3 {
display: none;
}
.div4 {
display: none;
}
.toggle:checked ~ .grid > .div3 {
display: block;
grid-column: 1;
grid-row: 2;
}
.toggle:checked ~ .grid > .div4 {
display: block;
grid-column: 2;
grid-row: 2;
}</pre>
<p>我希望 div 容器向下滑动，为添加的行腾出空间。感谢您的帮助。</p>
解决方案非常简单。我将我的网格放入另一个网格中。然后我简单地使用 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，动画将变得“滞后”。您可以做的就是将包装网格放入另一个包装网格中。然后，您不会使用实际行来为该网格设置动画，而是使用相同的方法为第一个网格的子级或实际网格的父级设置动画。
这是一种奇怪的解决方法，但它是解决问题的一种方法，而无需重做太多。