Chrome 107およびEdge 107にて、CSS Gridで行や列のアニメーションが可能になりました。SafariおよびFirefoxは対応済みなので、全ブラウザで使えることになります。
本記事では、CSS Gridのアニメーションについてデモを交えながら解説します。
目的のレイアウト
次のようなレイアウトを作りながら解説します。
左側のナビゲーションと右側の写真表示エリアからなる2カラムのコンテンツです。
左側ナビゲーション内のボタンをクリックすると、次のことが起こります。
- 左側がアニメーションしつつ広がる
- 右側エリアがアニメーションしつつ狭まる
使用するHTML / CSS / JavaScript
HTMLは次のようになっています。
▼ HTML
<heder>
<button class="menu-button">メニューボタン</button>
</heder>
<div class="container">
<!--ナビゲーションエリア-->
<nav>
<button>急上昇</button>
<button>音楽</button>
<button>動物</button>
<!-- 中略 -->
</nav>
<main>
<!-- 写真表示エリア -->
<div class="photo-list">
<img src="画像１" />
<img src="画像２" />
<img src="画像３" />
<!-- 中略 -->
</div>
</main>
</div>
CSSは次のとおりです。grid-template-columns: 40px 1fr;とは、カラム(列)が2つあり、1列目幅が60px、2列目幅が残り全部という意味です。ナビゲーションが開いたとき、.containerに対してJavaScriptを使って.openが付与され、1列の幅が広がります(200pxになります)。
▼ CSS
/* ナビゲーションが閉じているとき */
.container {
display: grid;
grid-template-columns: 40px 1fr;
}
/* ナビゲーションが開いたとき */
.container.open {
grid-template-columns: 200px 1fr;
}
display: grid;- CSS Gridによるレイアウトを指定する
grid-template-columns- 列のテンプレートを指定する
JavaScriptは次のとおりです。メニューのボタンをクリックするたびに、.container要素に.openを着脱するための処理です
▼ JavaScript
const container = document.querySelector(".container");
document.querySelector(".menu-button").addEventListener("click", () => {
container.classList.toggle("open");
});
CSS Gridの行や列のアニメーションに対応していないと、次のようにナビゲーションは一瞬で開閉します。
CSS Gridでアニメーションを使う
.container要素に対して、次のようにtransitionを指定します。時間300msかけてアニメーションしてくださいという意味です。
▼ CSS
.container {
display: grid;
grid-template-columns: 60px 1fr;
/* ☆アニメーションの設定 */
transition: 300ms all;
}
従来は transitionプロパティを指定したとしても、行や列のアニメーションは行われませんでしたが、Chrome/Edgeのアップデートにより、全ブラウザでアニメーションができるようになりました。
実際のデモとコードは、こちらのリンクからこのように確認できます。
対応ブラウザ
CSS Gridの行や列のアニメーションは、Chrome 107/Edge 107の登場により、全ブラウザ対応となりました。
最後に
筆者は、今回作ったようなアニメーションのナビゲーション表現をしたいと思っておりましたが、CSS Gridのアニメーションが対応していないため、できませんでした。position: fixed;でナビゲーションを固定すると同じ表現にはなりませんし、JavaScriptを使うと煩雑でした。
Chrome/Edgeのアップデートにより、手軽にCSS Gridのアニメーションができるようになって嬉しい限りです。
▼関連資料
TechFeedで連載中のCSS記事を公開しました💐
今回は、最近全ブラウザ対応したCSS Gridのアニメーションについて。
超かわいいデモと共に解説します🐈