Vueと共通

【Nuxt.js】transition基礎編:ページ遷移アニメーション

前置き

シンプルですが、インパクトがありますね!
ページ遷移アニメーション
これができるとダイナミックなアニメーションで
インパクトを与えられます。
今回はその基礎編として、
Nuxt.jsで簡単に実装する方法をご紹介します🌟
実践編では更に実用的な例をご紹介します!

transitionと@keyframe animationの違い

アニメーションをやると
必ず出てくるこの2つ。
簡単に違いを言うと
transitionはきっかけが必要です。
つまりページ遷移は、
遷移をきっかけにアニメーションを起こすため、
transitionが必須です。

@keyframe animationは
きっかけがなくても使用できます。
ちなみに併用は可能です。

まずはtransitionの簡単な使い方から解説、
その後ページ遷移の実装を行います!

transitionの使い方 超簡単ver.

クリックしてLogoコンポーネントを表示、
ほわっと出現させてみます⭐︎

アイコンはiconmonstrさんでお借りしました。
starで検索、
svgコードを貼り付けて使用しております。
https://iconmonstr.com/

【How to use】

使い方はtransitionに名前をつけて…
その名前をクラス名として使用するだけ!
ボタンをクリックしてから
どこまでにどの動きをするのかを
# トランジションクラスで設定します。
https://jp.vuejs.org/v2/guide/transitions.html#トランジションクラス

) pages

余白などのスタイリングは省きます。

transitionの使い方 ページ遷移ver

超簡単verを踏まえ
今度は遷移時にアニメーション
お星さまを/star.vueに移しています🎈🌟

【How to use】

今度はページ遷移をきっかけにアニメーションが起きます。
そのためindex.vueではtransitionの設定はしません。
遷移先で設定します。
今度はtransitionの名前を決めるだけでOK!
あとはトランジションクラスで動きをつけるだけ。
とっても簡単ですよね🤗

) pages

) pages

遷移先で設定
animationプロパティと
keyframesを併用しました。

これで基礎はバッチリですね🎉

-Vueと共通
-,

© 2020 aLiz Nuxt