先日いよいよAnimate.cssがv4になったのでwow.jsの使い方にコツがいる

Animate.cssとWOW.js、駆け出しwebエンジニアなら誰しもが一度は通る道ですよね。
とくにWOW.jsのはっちゃけたオフィシャルサイトは印象強いかも。

WOW.js
本家: https://github.com/graingert/wow
Fork: https://wowjs.uk/
Forkの方がStar多い...。内容はほぼ同じです。

そんな彼らですが、先日のAnimate.css v4.0.0リリースで、使い方にコツがいるようになりました。

変更点

• クラス名にprefixがつくようになった
  • Animate.cssから提供される全てのクラス名にanimate__というprefixがつきます。
• utilityクラス名の命名が変更になった?(DurationとかDelayとか)

① Animate.cssを導入

npmの場合

npm install animate.css --saveとかyarn add animate.cssとかする

node_modules下のcssファイルは ~ を使って読み込むのですよ。こんな感じ▼

@import "~animate.css/animate.min.css";

CDNの場合

公式サイトに沿ってCDN経由で読み込む。

② WOW.jsを導入

GitHubからローカルに導入するか、npm install wowjsでいけます。探すとCDNもあります。（公式からの案内はない）。

本家 ... wowjs
Fork ... wow.js

③スクリプトを配置

Typescriptの例ですがJavascriptでも同じです。
TSの場合はdefinition fileは提供されていないので require 関数で読み込みます。
ESLintを導入しているひとは例外を認めるコメントを書く必要があるかもです。下を参考にどうぞ。

app.ts

// eslint-disable-next-line @typescript-eslint/no-var-requires
const WOW = require('wow.js');

new WOW({
  animateClass: 'animate__animated'
}).init();

これだけで従来通り使えます。

ただしアニメーションのクラス名も
fadeIn -> animate__fadeIn
と変わっているのでお気をつけくださいまし。