Animate.css バージョン4 リリース
Animate.css バージョン4が2020年5月8日にリリースされた。
Animate.cssとはCSSを読み込んで特定のclassを追記するだけで要素にアニメーションをつけることができる便利なライブラリだ。
Animate.css v4はv3と互換性なし
Animate.cssはバージョン4からclass名が変更になったため、バージョン3と互換性がなくなった。
例えばバージョン3の場合はAnimate.cssを読み込んで、こちらの画像に「class="animated infinite shake"」を追加すると画像が無限に左右にシェイクするアニメーションとなる。
<!-- バージョン 3.5.1の場合 --> <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet"> <img class="animated infinite shake" src="https://iwb.jp/wp-content/uploads/2020/05/a.png">
しかしバージョン4からはclass名の頭にanimate__が付くようになったので「class="animate__animated animate__infinite animate__shakeX"」のようにanimate__を付けなければ動かなくなった。
さらにshakeは廃止でanimate__shakeXとanimate__shakeYの2つとなり、使用不可になっているので注意が必要だ。
<!-- バージョン 4.0.0の場合 --> <link href="https://cdn.jsdelivr.net/npm/animate.css@4.0.0" rel="stylesheet"> <img class="animate__animated animate__infinite animate__shakeX" src="https://iwb.jp/wp-content/uploads/2020/05/a.png">
Vue.jsのドキュメントのカスタムトランジションクラスの説明などではバージョン3が使用されているため、今後バージョン4を使用して動作せず混乱する人が増えそうだ。