Q&ANuxtで全ページ共通のトランジションの実装方法についての最適方法がわかりません。
下記のようなコードをlayouts/default.vueに書き、全ページ共通のトランジションの実装を試しましたが、.e-enter-activeだけしか動きません。
各pagesのvueファイルにtransition: "e"を追加すれば意図したとおりに動作します。
しかし、全ページ共通のトランジションにするうえで毎回transitionキーを新たなpagesのvueファイルに追加するのは面倒だと考えています。
毎回transitionキーを追加することなく全ページ共通のトランジションの実装をする方法があればご教授ください。
Vue
1<template> 2 <div id="wrapper"> 3 <VueHeader /> 4 <main> 5 <transition name="e"> 6 <nuxt id="container" /> 7 </transition> 8 </main> 9 <VueFooter /> 10 </div> 11</template> 12 13<style scoped> 14.e-enter-active { 15 animation: e-in 0.8s; 16} 17.e-leave-active { 18 animation: e-out 0.5s; 19} 20@keyframes e-in { 21 0% { 22 opacity: 0; 23 transform: scale(0); 24 } 25 50% { 26 opacity: 1; 27 transform: scale(1.2); 28 } 29 100% { 30 opacity: 1; 31 transform: scale(1); 32 } 33} 34@keyframes e-out { 35 0% { 36 opacity: 1; 37 transform: scale(1); 38 } 39 50% { 40 opacity: 1; 41 transform: scale(1.2); 42 } 43 100% { 44 opacity: 0; 45 transform: scale(0); 46 } 47} 48</style> 49 50<script> 51import VueHeader from '~/components/header/Header.vue'; 52import VueFooter from '~/components/footer/Footer.vue'; 53 54export default { 55 components: { 56 VueHeader, 57 VueFooter 58 } 59}; 60</script>
回答1件
0
自己解決
js
1//nuxt.config.js 2export default { 3 transition: 'transition' 4}
nuxt.config.jsにtransitionを追加すれば、全ページ共通のトランジションを適用することが出来ました。
nuxt公式サイトの参考ページ
投稿2019/05/28 13:24
総合スコア211
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。