fix: 페이지 트랜지션 없는 현상 고침

NGuard-Security · Jan 19, 2024 · 4f7ca86 · 4f7ca86
1 parent ea8fff3
commit 4f7ca86
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 34 deletions.
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
@@ -63,10 +63,10 @@ body {
 
 .page-enter-active,
 .page-leave-active {
-  transition: opacity 0.3s;
+  transition: opacity 0.1s;
 }
 
-.page-enter,
+.page-enter-from,
 .page-leave-to {
   opacity: 0;
 }
diff --git a/assets/styles/layouts/dashboard.scss b/assets/styles/layouts/dashboard.scss
@@ -115,16 +115,6 @@ main {
     padding-right: 3rem;
   }
 
-  .contents-enter-active,
-  .contents-leave-active {
-    transition: opacity 0.3s;
-  }
-
-  .contents-enter-from,
-  .contents-leave-to {
-    opacity: 0;
-  }
-
   code {
     background: #0e0e13;
     padding: 3px;

diff --git a/assets/styles/layouts/spinerProvider.scss b/assets/styles/layouts/spinerProvider.scss
@@ -1,14 +1,10 @@
-.spiner-enter-active,
-.spiner-leave-active,
-.connErr-enter-active,
-.connErr-leave-active {
-  transition: opacity 0.3s;
+.spinner-contents-enter-active,
+.spinner-contents-leave-active {
+  transition: opacity 0.15s;
 }
 
-.spiner-enter-from,
-.spiner-leave-to,
-.connErr-enter-from,
-.connErr-leave-to {
+.spinner-contents-enter-from,
+.spinner-contents-leave-to {
   opacity: 0;
 }
 

diff --git a/layouts/spinerWrap.vue b/layouts/spinerWrap.vue
@@ -7,7 +7,7 @@ const { loadingState } = useLoadingState()
 </style>
 
 <template>
-  <transition name="contents">
+  <transition name="spinner-contents">
     <div v-if="loadingState === LOADING_STATE.Success">
       <slot />
     </div>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -7,6 +7,7 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
 
   app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
     head: {
       title: 'NGuard Console',
       meta: [

diff --git a/pages/dashboard.vue b/pages/dashboard.vue
@@ -1,17 +1,8 @@
-<script setup lang="ts">
-const i18n = useI18n()
-</script>
-
 <template>
-  <NuxtLayout>
-    <div :class="`i18n i18n_${i18n.locale.value}`">
-      <AppHeader />
-      <div class="flex w-full h-full min-h-0">
-        <AppNavBar />
+  <NuxtLayout name="app-base">
+    <AppNavBar />
 
-        <NuxtPage />
-      </div>
-    </div>
+    <NuxtPage />
   </NuxtLayout>
 </template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ export default defineNuxtConfig({ @@
       devtools: { enabled: true },
       app: {
+        pageTransition: { name: 'page', mode: 'out-in' },
         head: {
           title: 'NGuard Console',
           meta: [
@@ Expand Down @@