Vue.js フロントサイド

様々なアニメーションを簡単に実現可能なAnimate.cssを使ってみた

今回はいろんなアニメーションを簡単に実現するAnimate.cssを使って見ようと思います。

Animate.cssとは

Animate.cssはフェードインやスライドインといったCSSのアニメーションをパッケージしたCSSファイルです。

詳細はこちらから

CDNを使う場合は以下を記述すればOKです。

Vue.jsとの組み合わせ

単体でも使用可能ですが、もちろんVue.jsと組み合わせることも可能です。

下のようにアニメーションを適用したい範囲をtransitionタグでくくって

表示する際に適用するアニメーションをenter-active-classに

非表示にする際に適用するアニメーションをleave-active-classに

記述します。

 

使用例

フェードイン&フェードアウト

 

See the Pen
Animate.css fadeIn fadeOut
by shirosmith1793 (@phantom1793)
on CodePen.

スライドイン&スライドアウト

See the Pen
Animate.css SlideIn & SlideOut
by shirosmith1793 (@phantom1793)
on CodePen.

回転&逆回転

See the Pen
Animate.css RotateIn&RotateOut
by shirosmith1793 (@phantom1793)
on CodePen.

-Vue.js, フロントサイド
-,

© 2023 Shiro's secret base