CSSグリッドのアニメーション（例の方法）-CSSチュートリアル-php.cn

CSSグリッドのアニメーション（例の方法）

Joseph Gordon-Levitt

リリース： 2025-03-09 13:11:11

オリジナル

196 人が閲覧しました

Animating CSS Grid (How To Examples)

CSS Gridのgrid-template-rowsgrid-template-columnsおよび

プロパティが、すべてのメジャーブラウザでアニメーションに利用できるようになりました！実際、CSSグリッドは、CSSグリッドレイアウトモジュールレベル1仕様に組み込まれているため、アニメーションを長い間サポートしてきました。

しかし、最近まで、3つの主要なブラウザはすべて、これらのメッシュプロパティのアニメーションを完全にサポートしています。あなたの創造性を刺激するためのいくつかの例を見てみましょう！

カタログ

例1：サイドバーを展開します

まず、これが私たちが議論しようとしていることです：

単純な2列グリッド。以前は、アニメーションとトランジションがサポートされていないため、おそらくCSSグリッドでそれを構築していなかったでしょうが、左列（おそらくサイドバーナビゲーション）がホバーで拡張する必要がある場合はどうでしょうか？今、これは可能です。

私はあなたが考えていることを知っています：「アニメーションCSS属性？ケーキ、私は長年それをやっています！」しかし、特定のユースケースを試すと、興味深いハードルに遭遇しました。

.gridしたがって、メッシュ自体を変換したい（特に、例のgrid-template-columnsクラスに設定されたセット）。ただし、左の列（.left）は、:hover

HTMLから始めて、プロセス全体を段階的に説明しましょう。それは実際には非常に標準的です... 2つの列のあるグリッド。

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

ログイン後にコピー

装飾CSSは別として、最初に親コンテナ（

）に.gridを設定する必要があります。 display: grid

.grid {
  display: grid;
}

ログイン後にコピー

次に、

属性を使用して、2つの列を定義およびサイズ変更できます。左の列を非常に狭く設定し、後でホバリングすると幅を増やします。右側の列は、grid-template-columnsキーワードのおかげで、残りのスペースを占有します。 auto

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

ログイン後にコピー

アニメーション化したいことがわかっているので、アニメーションを追加しながら遷移効果を追加して、状態間の変更がスムーズで明白になるようにしましょう。

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根据需要更改 */
}

ログイン後にコピー

完成しました！残りはアプリケーションホバー状態です。具体的には、左の列がホバリング時により多くのスペースを占めるように、.gridプロパティをオーバーライドします。 grid-template-columns CSSグリッドはアニメーションとトランジションをサポートしていますが、これだけではそれだけではありません。さらに興味深いのは、比較的新しい pseudoクラスを使用して、子要素（

）がホバリングされているときに親コンテナ（

）をスタイリングできることです。 :has()

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

ログイン後にコピー

これは、「.gridコンテナが.leftという名前の要素がホバリングしている場合、.gridコンテナでいくつかの操作を実行することを意味します。最終的に、それに含まれる子要素に基づいて親要素を選択できます - JavaScriptは必要ありません！ :has()

では、ホバリング時に

列の幅を30％に増やしましょう。 .left列は、残りのすべてのスペースを引き続き占有します：.right

個人の好みに応じて（またはプロジェクトで既にCSS変数を使用する場合がある）、簡潔に見える場合とそうでない場合があるCSS変数を使用することもできます。

.grid {
  display: grid;
}

ログイン後にコピー

CSSグリッドがアニメーションを作成できるようになりましたが、CSSコードの9行のみでこの特定の例を作成できるという事実はさらに驚くべきものです。

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

ログイン後にコピー

これはOlivia ngの別の例です。これは概念ですが、コンテンツが含まれています（ナビゲーションアイコンをクリックしてください）：

例2：パネルを展開します

この例は、グリッドコンテナ（列幅）を変換し、個々の列（背景色）も変換します。ホバーでより多くのコンテンツを提供するのに最適です。

関数が間違った遷移を生成することがあることを覚えておく価値があります。そのため、各列の幅を個別に設定します（つまり、

）。

repeat()例3：行と列を追加grid-template-columns: 1fr 1fr 1fr

この例は、グリッドの列をアニメーション化します。しかし、あなたはそれを推測しました - この状況にもtrapがあります。要件は、「新しい」列を隠すことができない（つまり、

に設定する）、CSSグリッドが幅を0FRに設定するときにその存在を認めなければならないことです。

したがって、3列のグリッドの場合 -

（はい、値が0であってもユニットを宣言する必要があります！）はdisplay: noneに正しく変換されますが、

はそうではありません。後知恵では、これは実際には、移行がどのように機能するかについての理解を考えると、完全に合理的です。

grid-template-columns: 1fr 1fr 0frこれはミシェル・バーカーのもう1つの例です。同じ概念ですが、列とよりクールな効果があります。実際に応答性が高いので、この例をフルスクリーンモードで実行してください（トリックはなく、デザインだけです！）。 grid-template-columns: 1fr 1fr 1fr grid-template-columns: 1fr 1frその他の例

なぜ？