前置き
ボタンだけのシンプルなページをほわっと表示。
今回の実践編では、
全てのページ遷移時でアニメーション🤗
これだけでもウキウキしますね🕺
基礎編がまだの方はこちら！
ページ遷移アニメーションを全体化しよう
【ディレクトリ の構造、ファイル名】
ページは下記の順番で遷移します。
index.vue → main.vue → sub.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
assets/ --| scss -----| common.scss layouts/ --| default.vue pages/ --| index.vue --| main.vue --| sub.vue nuxt.config.js // common.scssを読み込ませる |
【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タグで囲う
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div> <transition name="page"> <nuxt /> </transition> </div> </template> <script> export default { } </script> |
) file
configで設定したnameを使って
アニメーションを設定するだけです🌟
|
1 2 3 4 5 6 |
.page-enter { opacity: 0; } .page-enter-active { transition: opacity 2s; } |
…終わりです😲
ページ遷移アニメーションと、
それを全体化させるだけならこれで終わり！
と〜〜〜っても簡単ですよね🍒
複雑なアニメーションをやるなら
CSSが1番大変ですよね…（ボソボソ）
あとはpagesにページ遷移を書き込みましょう✍️
スタイリングは省きます。
そのため遷移先のみ変えればOKです！
) pages
|
1 2 3 4 5 |
<template> <div class="container"> <nuxt-link to="/main">MOVE</nuxt-link> </div> </template> |
) pages
|
1 2 3 4 5 |
<template> <div class="container"> <nuxt-link to="/sub">MOVE</nuxt-link> </div> </template> |
) pages
|
1 2 3 4 5 |
<template> <div class="container"> <nuxt-link to="/">MOVE</nuxt-link> </div> </template> |
完成です🎉
意外とシンプルで簡単ですね♪