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.

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

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

© 2021 Shiro's secret base