Vueと共通

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

前置き

ボタンだけのシンプルなページをほわっと表示。
今回の実践編では、
全てのページ遷移時でアニメーション🤗
これだけでもウキウキしますね🕺
基礎編がまだの方はこちら!

ページ遷移アニメーションを全体化しよう

【ディレクトリ の構造、ファイル名】
ページは下記の順番で遷移します。
index.vue → main.vue → sub.vue

【How to use】

基礎編でのtransitionの使い方を元に、
全てのページでアニメーションを適応するため
デフォルトレイアウトを使用します。
公式 pageTransition プロパティ参照です!
layoutTransitionはlayouts同士での
切り替えに使うので…
(layouts/default.vue → layouts/hogehoge.vue)
今回はpageTransitonのみです!
https://ja.nuxtjs.org/api/configuration-transition/

v2.7.0〜
nuxt.config.jsで
pageTransition記載が不要になりました!
超シンプルで簡単になりましたね🤗
デフォルトのname="layout"で反映させてます。

) file

PageTransitionを適応
・transitionタグに
 デフォルトのname="page"を記載
・<nuxt />をtaransitonタグで囲う

) file

configで設定したnameを使って
アニメーションを設定するだけです🌟

…終わりです😲
ページ遷移アニメーションと、
それを全体化させるだけならこれで終わり!
と〜〜〜っても簡単ですよね🍒
複雑なアニメーションをやるなら
CSSが1番大変ですよね…(ボソボソ)

あとはpagesにページ遷移を書き込みましょう✍️
スタイリングは省きます。
そのため遷移先のみ変えればOKです!

) pages

) pages

) pages

完成です🎉
意外とシンプルで簡単ですね♪

-Vueと共通
-,

© 2020 aLiz Nuxt