ソリッドシード株式会社
脱jQuery？CSSで作るアニメーション
フロントエンドエンジニアの方なら馴染みの深いアニメーション処理ですが、
ひと昔前は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の要素をアニメーションさせて非表示にするにはやや工夫が必要です。
Komine
