CSS が grid-template-rows & grid-template-columns プロパティは すべての主要な Web ブラウザーでアニメーション化できるようになりました! CSS Grid は長い間技術的にアニメーションをサポートしてきました。 CSS グリッド レイアウト モジュール レベル 1 仕様に組み込まれています.
しかし、これらのグリッド プロパティのアニメーション化は、XNUMX つの主要なブラウザーすべてでサポートされるようになったのはつい最近のことです。 いくつかの例を見て、創造力を発揮してみませんか?
目次
例 1: サイドバーの展開
まず第一に、これは私たちが話していることです：
シンプルな XNUMX 列のグリッド。 今、前に、あなたはかもしれません アニメーションとトランジションがサポートされていないため、CSS Grid を使用してこれを作成しましたが、ホバー時に左の列 (おそらくサイドバーのナビゲーション) を展開したい場合はどうすればよいでしょうか? さて、それが可能になりました。
私はあなたが何を考えているか知っています： 「CSS プロパティをアニメーション化しますか? 簡単です、私は何年もそれをやっています！ 私も。 しかし、特定のユース ケースを試しているときに、興味深い障害に遭遇しました。
したがって、グリッド自体を遷移させたい (具体的には grid-template-columns、に設定されています .grid 例のクラス)。 しかし、左の列 (.left) は、 :hover 疑似クラス。 JavaScript はこの難問を簡単に解決できますが (感謝しますが、感謝しません)、CSS だけで解決できます。
HTML から始めて、全体を見ていきましょう。 かなり標準的なものです... XNUMX つの列を持つグリッドです。
<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>見た目のCSSはさておき、最初に設定する必要があります display: grid 親コンテナ (.grid).
.grid { display: grid;
}次に、を使用して XNUMX つの列を定義し、サイズを設定できます。 grid-template-columns 財産。 左の列を非常に狭くし、ホバー時に幅を広げます。 のおかげで、右側の列が残りのスペースを占有します。 auto キーワード。
.grid { display: grid; grid-template-columns: 48px auto;
}これをアニメートすることはわかっているので、先に進んで transition 状態間の変化がスムーズで目立ちます。
.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}これで終わりです .grid! あとは、ホバー状態を適用するだけです。 具体的には、 grid-template-columns プロパティを変更して、ホバー時に左側の列がより多くのスペースを占有するようにします。
CSS グリッドでアニメーションとトランジションがサポートされるようになったことは素晴らしいことですが、これだけではそれほど興味深いことではありません。 さらに興味深いのは、比較的新しい :has() 疑似クラス 親コンテナのスタイルを設定します (.grid) 子 (.left) がホバーされます。
.grid:has(.left:hover) { /* Hover styles */
}平易な英語では、これは次のように言っています。 「何かをする .grid という名前の要素が含まれている場合はコンテナ .left その中でホバー状態です。」 それが理由です :has() 多くの場合、「親」セレクターと呼ばれます。 最後に、含まれる子に基づいて親を選択できます — JavaScript は必要ありません!
では、幅を広げてみましょう。 .left 列から 30% ホバリングしたとき。 の .right 列は残りのスペースをすべて占有し続けます。
.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}CSS 変数を使用することもできますが、これは個人の好みに応じてきれいに見える場合とそうでない場合があります (または、とにかくプロジェクトで CSS 変数を使用している可能性があります)。
.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}I 愛 CSS グリッドをアニメーション化できるようになりましたが、たった XNUMX 行の CSS でこの特定の例を作成できるという事実は、さらに驚くべきことです。
別の例を次に示します オリビア・ング — 同様の概念ですが、コンテンツがあります (ナビゲーション アイコンをクリックします):
例 2: パネルの展開
この例では、グリッド コンテナー (列幅) だけでなく、個々の列 (背景色) も遷移します。 ホバー時により多くのコンテンツを提供するのに理想的です。
覚えておく価値があるのは、 repeat() 関数はバグのあるトランジションを生成することがあります。そのため、各列の幅を個別に設定します (つまり、 grid-template-columns: 1fr 1fr 1fr).
例 3: 行と列の追加
この例では、グリッドに列をアニメーションで「追加」します。 ただし、ご想像のとおり、このシナリオにも落とし穴があります。 要件は、「新しい」列を非表示にしないことです (つまり、 display: none)、および CSS グリッドは、その幅を 0fr.
したがって、XNUMX 列のグリッドの場合 — grid-template-columns: 1fr 1fr 0fr (はい、値が 0!) への遷移 grid-template-columns: 1fr 1fr 1fr 正しく、しかし grid-template-columns: 1fr 1fr しません。 後から考えると、これは実際に私たちが知っていることを考えると完全に理にかなっています トランジションのしくみ.
別の例を次に示します ミシェル・バーカー — 同じ概念ですが、追加の列と たくさん もっとピザズ。 これは実際にレスポンシブであるため、必ずフルスクリーン モードで実行してください (トリッキーではなく、デザインが優れているだけです!)。
さらにいくつかの例
なぜですか？
この「Animated Mondrian」は、アニメーション化された CSS グリッドの最初の概念実証です。 Chrome デベロッパーを選択します。 grid-row'砂 grid-columnの利用 span キーワードを使用して目の前に表示されるレイアウトを作成し、次に grid-template-row'砂 grid-template-columnは、CSS アニメーションを使用してアニメーション化されます。 見た目ほど複雑ではありません。
コンセプトは同じですが、ミシェル・バーカーの魅力がさらに増しています。 素敵なローディングスピナーを作ることができますか?
ちょっとした懐かしさで締めくくります (ここに私の年齢を示します)。 アンドリュー・ハーバード. 繰り返しますが — 同じ概念 — 他のグリッド項目が見えないだけです。 しかし、心配しないでください、彼らはそこにいます。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/animating-css-grid-how-to-examples/
