0. プロジェクトの背景: vue3 + vite + typescript
以下はプロジェクトで使用されるバージョンです
"vue": "^3.0.4",
"typescript": "^4.4.4",
"vite": "^2.6.14"
1.animate.cssをインストールする
npm i animate.css
インストールが完了すると、package.jsonインストールされているバージョンが確認できるので、以下の図が今回インストールされたバージョンを示しています。
"dependencies": {
"animate.css": "^4.1.1"
}
2.animate.cssを導入する
vueプロジェクトmain.tsにアニメーションライブラリを導入する
// 引入动画库
import "animate.css"
3. 使用する
非常に簡単で、アニメーション化する必要がある HTML に対応するクラス名を追加するだけです。たとえば次のようになります。
<div class="animate__animated animate__fadeInDown"></div>
その他のアニメーションはアニメイト公式アドレス：https: //animate.style/をご覧ください。
4. 落とし穴に注意する
インストールされている animate のバージョンは 4.x であるため、使用する場合は、対応するすべてのクラス名がanimate__それらで始まり、animate__animated一緒に使用する必要があることに注意してください。