グリッド レイアウトの展開をアニメーション化するにはどうすればよいですか?
P粉937382230
2023-08-31 21:09:37
<p>グリッドレイアウトの展開をアニメーション化する方法を知りたいです。コードからわかるように、4 つの div があります。そのうちの 2 つは表示され、残りの 2 つはチェックボックスが選択されている場合にのみ表示されます。 </p>
<p>チェックボックスを選択すると、div3 と div4 を含む別の行が追加されます。拡張機能をアニメーション化するにはどうすればよいですか?グリッドのサイズを小さくしておくことをお勧めします。アニメーションが（存在しない）マージンに影響を与えたくないのです。これもJavaScriptを使わずにやりたいと思っています。出来ますか？ </p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<頭>
<meta charset="utf-8">
<メタ名="ビューポート"コンテンツ="幅=デバイス幅、初期スケール=1""
<link rel="stylesheet" href="style.css">
<title>ウェブサイト</title>
</head>
<本体>
<input class="toggle" type="checkbox">
<div class="グリッド">
<div class="div1">こんにちは</div>
<div class="div2">Hello2</div>
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</ボディ>
</html></pre>
<pre class="brush:php;toolbar:false;">.toggle {
幅: 100%;
}
.grid {
表示: グリッド;
幅: 20%;
境界線: 黒一色 2px;
}
.div1 {
グリッド列: 1;
グリッド行: 1;
}
.div2 {
グリッド列: 2;
グリッド行: 1;
}
.div3 {
表示: なし。
}
.div4 {
表示: なし。
}
.toggle:checked ~ .grid > .div3 {
表示ブロック;
グリッド列: 1;
グリッド行: 2;
}
.toggle:checked ~ .grid > .div4 {
表示ブロック;
グリッド列: 2;
グリッド行: 2;
}</pre>
<p>div コンテナを下にスライドさせて、追加した行のためのスペースを確保したいと考えています。ご協力いただきありがとうございます。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
解決策は非常に簡単です。グリッドを別のグリッドの中に入れました。次に、メイングリッドがある div の行のサイズを変更する方法として、単に fr を使用しました。これにより、グリッド行が 0fr から 1fr に変換される可能性があります。それでおしまい。
また、グリッド内に異なるサイズの異なる行がある場合も同様です。たとえば、1 つは 0.05fr、もう 1 つは 1fr で、アニメーションは「ラグ」になります。できることは、ラッパー グリッドを別のラッパー グリッドの中に配置することです。次に、実際の行を使用してそのグリッドをアニメーション化する代わりに、同じ方法を使用して最初のグリッドの子または実際のグリッドの親をアニメーション化します。
これは奇妙な回避策ですが、あまりやり直さずに問題を解決する方法です。