如何製作網格佈局擴充的動畫？
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，動畫將變得「滯後」。您可以做的就是將包裝網格放入另一個包裝網格中。然後，您不會使用實際行來為該網格設定動畫，而是使用相同的方法為第一個網格的子級或實際網格的父級設定動畫。
這是一種奇怪的解決方法，但它是解決問題的一種方法，而無需重做太多。