ソリッドシード株式会社

脱jQuery?CSSで作るアニメーション

2020年12月9日

フロントエンドエンジニアの方なら馴染みの深いアニメーション処理ですが、  
ひと昔前はjQueryのanimateメソッドやslideToggleメソッドを用いる事が多かったです。
最近ではSVGアニメーションやCSSのtransition、animation等で行うのが一般的になってきたかと思います。 

まだまだjQueryで十分!という所もあるかと思いますが  
今日はCSSで行うアニメーションとjQueryとの比較や注意点などを見ていきましょう。  

さっそく比較

シンプルにトグルボタンをクリックすると開閉するアニメーションで比較してみましょう。

まずはjQuery。

See the Pen Animation for jQuery by komine (@komine) on CodePen.


次に、CSSのtransition。

See the Pen VwKjxar by komine (@komine) on CodePen.


両方のアニメーションを比較すると、画像部分の消え方に少し差異がありました。
また、jQueryのアニメーションの記述はたったの3行で済んでしまいました。

これだけを見るとCSSで処理するのはやや煩雑でメリットが無いように感じますが、
CSSでアニメーションを行う場合、JavaScriptが実行されるブラウザの「メインスレッド」とは異なるスレッドで実行されます。
その為、JavaScriptによる重い処理の最中でもCSSで行うアニメーションは中断される事がないというメリットがあります。

また、CSSの場合は煩雑である代わりに調節が効きます。
例えば、

画像はクリックした瞬間に非表示になり、その他はアニメーション

See the Pen Animation for transition2 by komine (@komine) on CodePen.


画像は表示したままで、画像のborder, margin, paddingを非表示にし、背景は右から左に畳むアニメーション

See the Pen Animation for transition3 by komine (@komine) on CodePen.


など、細かく調整できるのは嬉しいですね。

注意点

CSSのtransitionを用いたアニメーションで注意が必要な点があります。
当然ではありますが、slideToggleメソッドの様に一番外側の要素だけに対して処理を行っても、内側の要素は非表示にはなりません。
また、height:autoの要素をアニメーションさせて非表示にするにはやや工夫が必要です。

投稿者:KomineKomine