今回はいろんなアニメーションを簡単に実現するAnimate.cssを使って見ようと思います。
Animate.cssとは
Animate.cssはフェードインやスライドインといったCSSのアニメーションをパッケージしたCSSファイルです。
詳細はこちらから
CDNを使う場合は以下を記述すればOKです。
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> |
Vue.jsとの組み合わせ
単体でも使用可能ですが、もちろんVue.jsと組み合わせることも可能です。
下のようにアニメーションを適用したい範囲をtransitionタグでくくって
表示する際に適用するアニメーションをenter-active-classに
非表示にする際に適用するアニメーションをleave-active-classに
記述します。
|
1 2 3 4 5 |
<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut"> <div v-if="show"> <p>サンプルテキスト</p> </div> </transiton> |
使用例
フェードイン＆フェードアウト
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.