如何製作網格佈局擴充的動畫？
<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>
