Help us understand the problem. What is going on with this article?

GridLayoutをアニメーションさせたかった話

ことの始まり

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


………
…………

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

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

調べてみた

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

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

こうすればできるらしい

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

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

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

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

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

ということで、なんとかシンプルで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-rowsgrid-template-columnsを用いてのAnimationは、現状ではFireFoxしか対応していないので、
Animationさせたい要素の幅を変更することで、どのブラウザでも適応できるAnimationの方法を学ぶことができました。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした