ことの始まり

ある日
GridLayoutで要素を配置していくの楽でたのしー！
headerもfooterもSideBarもdiv地獄にならずに設置できていい感じに作れるのがいい。

…
………
…………

SideBarの幅を動的に広げたり狭めたりするのと連動して、広い方も幅が狭くなるように動いてほしいな…。
でも、gridLayoutってAnimationてできるんだろうか…。

という事から始まった、gridLayoutでAnimationさせてみたを今回やってみましょう。

調べてみた

まずは、gridLayoutがAnimationさせれるかを調べてみましょう。
ブラウザごとによって対応しているかどうかの、Can Iで調べてみます。

grid animationで検索してみます。
grid-template-rowsとgrid-template-columnsに関するCSSプロパティの対応表がヒットしました。
これら2つはgridLayoutの縦幅を決めるプロパティですね。
対応表を見てみると、FireFoxだけ対応していて他の主要ブラウザは非対応状態です。

こうすればできるらしい

ということで、実際にコードを書いて確認してみましょう。

See the Pen gridLayout-animation by OKAUEND (@okauend) on CodePen.

Chromeで確認するとカクカクしていてAnimationしていません。
Firefoxで確認すると綺麗にAnimationしています。

それでもアニメーションさせたい

GridLayoutのgrid-template-rowsとgrid-template-columnsをAnimationさせることは可能ということが解りましたが、
対応ブラウザが1つだけでは実践ではとてもじゃないが使えません。
~~ブラウザ毎にCSS変えるのってとてもめんどくｓ~~

ということで、なんとかシンプルでgridLayoutをAnimationさせれないか調べてみました。
そしたら、FireFox 66 以降のバージョンでAnimationさせる方法を解説している記事を見つけました。
その中にgridLayoutで別の方法を用いAnimationさせるやり方が記載されていました。

New in Firefox 66: Animating CSS Grid

その中の記事で、上記の方法の他にgrid-gapを使う方法ともう要素の幅を変更することでの方法が書かれています。
まずはgrid-gapの方から見ていきましょう。

grid-gap

最初に、grid-gapが何かをMDNを確認してみましょう。
grid-gap

CSS の gap プロパティは、行や列の間のすき間 (溝) を定義します。
これは row-gap 及び column-gap の一括指定です。

grid-gapは行と列の隙間の幅を設定するプロパティですね。
上記の解説記事を参考に、grid-gapでAnimationさせてみた感じはこんなふうになりました。

See the Pen gridLayout-gapAnimation by OKAUEND (@okauend) on CodePen.

ChromeでもAnimationするようになりましたが、左右からせり出してくる感じのAnimationですね。
grid-gapは、列の隙間幅や行の隙間幅を設定することはできますが、
「n番目のラインの列側だけを設定したい」みたいな個別には対応していないので、今回私がやりたい事にはマッチしなさそうです。

幅を指定してやってみる

解説記事の続きにある、「How about other browsers?」に要素の幅を実際に変更する方法があります。
記事を参考にコーディングしてみました。

See the Pen gridLayout-widthAnimation by OKAUEND (@okauend) on CodePen.

この方法だと、ChromeでもSideBarに当たる部分だけが綺麗にAnimationしますね。
FireFoxでも同くChromeと同じようにAnimationをしています。
ちなみにEdgeでも同じようにAnimationしています。
gridLayoutでAnimationさせたい場合は、この方法がどのブラウザでも適応できそうです。

終わりに

今回はgridLayoutで無事Animationをすることができました。
grid-template-rowsとgrid-template-columnsを用いてのAnimationは、現状ではFireFoxしか対応していないので、
Animationさせたい要素の幅を変更することで、どのブラウザでも適応できるAnimationの方法を学ぶことができました。

FireFoxが対応している、grid-template-rowsとgrid-template-columnsの値を変更することでのAnimationも、
Chromeや他のブラウザでも対応してほしいところですが、実装予定の中には確認できなかったので、しばらくは対応しなさそうです。