refactor: remove route animations

Author: cwandev

app/app.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ConfigProviderTheme } from 'vant'
 import useKeepalive from '~/composables/keepalive'
-import useRouteTransitionName from '~/composables/transitions'
 import { appName } from '~/constants'
 
 useHead({
@@ -17,18 +16,14 @@ const mode = computed(() => {
 const keepAliveRouteNames = computed(() => {
   return useKeepalive().routeCaches as string[]
 })
-
-const transitionName = computed(() => {
-  return useRouteTransitionName().routeTransitionName
-})
 </script>
 
 <template>
   <VanConfigProvider :theme="mode">
     <ColorScheme tag="div">
       <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
       <NuxtLayout>
-        <NuxtPage :keepalive="{ include: keepAliveRouteNames }" :transition="{ name: transitionName }" />
+        <NuxtPage :keepalive="{ include: keepAliveRouteNames }" />
       </NuxtLayout>
     </ColorScheme>
   </VanConfigProvider>

app/components/Container.vue

@@ -1,22 +1,6 @@
-import type { RouteLocationNormalized } from '#vue-router'
 import useKeepalive from '~/composables/keepalive'
-import routeTransitionNameStore from '~/composables/transitions'
 
-export default defineNuxtRouteMiddleware((to: RouteLocationNormalized, from) => {
-  // KeepAlive
+export default defineNuxtRouteMiddleware((to) => {
   if (to.meta && to.meta.keepalive)
     useKeepalive().addRoute(to)
-
-  // Set route transition name
-  if (!to.meta.level || !from.meta.level)
-    return
-
-  if (to.meta.level > from.meta.level)
-    routeTransitionNameStore().setName('slide-fadein-left')
-
-  else if (to.meta.level < from.meta.level)
-    routeTransitionNameStore().setName('slide-fadein-right')
-
-  else
-    routeTransitionNameStore().setName('')
 })

app/composables/transitions.ts

@@ -4,10 +4,6 @@ import type { PickerColumn } from 'vant'
 import type { ComputedRef } from 'vue'
 import { Locale } from 'vant'
 
-definePageMeta({
-  level: 1,
-})
-
 const color = useColorMode()
 
 useHead({
@@ -45,7 +41,7 @@ const menus = computed(() => [
 ])
 
 function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
-  const lang = event.selectedOptions[0].code
+  const lang = event.selectedOptions[0]?.code
 
   setLocale(lang)
   Locale.use(lang)
@@ -56,7 +52,7 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
 </script>
 
 <template>
-  <Container :padding-x="0">
+  <div>
     <VanCellGroup inset>
       <VanCell :title="$t('menu.darkMode')" center>
         <template #right-icon>
@@ -76,19 +72,19 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
         @click="showLanguagePicker = true"
       />
 
-      <van-popup v-model:show="showLanguagePicker" position="bottom">
-        <van-picker
-          v-model="languageValues"
-          :columns="locales"
-          :columns-field-names="{ text: 'name', value: 'code' }"
-          @confirm="onLanguageConfirm"
-          @cancel="showLanguagePicker = false"
-        />
-      </van-popup>
-
       <template v-for="item in menus" :key="item.route">
         <VanCell :title="item.title" :to="item.route" is-link />
       </template>
     </VanCellGroup>
-  </Container>
+
+    <van-popup v-model:show="showLanguagePicker" position="bottom">
+      <van-picker
+        v-model="languageValues"
+        :columns="locales"
+        :columns-field-names="{ text: 'name', value: 'code' }"
+        @confirm="onLanguageConfirm"
+        @cancel="showLanguagePicker = false"
+      />
+    </van-popup>
+  </div>
 </template>

app/middleware/route.global.ts

@@ -8,15 +8,14 @@ definePageMeta({
   keepalive: true,
   title: '🧡 KeepAlive',
   i18n: 'menu.keepAlive',
-  level: 2,
 })
 
 const value = ref(1)
 </script>
 
 <template>
-  <Container>
-    <p>{{ $t('keepalive_page.label') }}</p>
-    <van-stepper v-model="value" />
-  </Container>
+  <div>
+    <p> {{ $t('keepalive_page.label') }} </p>
+    <van-stepper v-model="value" class="mt-10" />
+  </div>
 </template>

app/pages/index.vue

@@ -1,13 +1,5 @@
-<script setup lang="ts">
-definePageMeta({
-  level: 1,
-})
-</script>
-
 <template>
-  <Container>
-    <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
-      {{ $t('profile_page.txt') }}
-    </div>
-  </Container>
+  <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
+    {{ $t('profile_page.txt') }}
+  </div>
 </template>

app/pages/keepalive/index.vue

@@ -2,12 +2,11 @@
 definePageMeta({
   title: '🎨 Unocss 示例',
   i18n: 'menu.unocssExample',
-  level: 2,
 })
 </script>
 
 <template>
-  <Container>
+  <div>
     <h1 class="text-6xl color-pink font-semibold">
       {{ $t('unocss_page.hello', ['Unocss!']) }}
     </h1>
@@ -19,5 +18,5 @@ definePageMeta({
     <button class="mt-10 btn">
       {{ $t('unocss_page.btn_txt') }}
     </button>
-  </Container>
+  </div>
 </template>

app/pages/profile/index.vue

@@ -1,8 +1,6 @@
 #__nuxt {
-  height: 100vh;
   margin: 0;
   padding: 0;
-  position: relative;
 }
 
 html {
@@ -14,25 +12,3 @@ html.dark {
   background: #222;
   color-scheme: dark;
 }
-
-.slide-fadein-left-enter-active,
-.slide-fadein-left-leave-active,
-.slide-fadein-right-enter-active,
-.slide-fadein-right-leave-active {
-  transition:
-    opacity 0.3s,
-    transform 0.4s,
-    -webkit-transform 0.4s;
-}
-
-.slide-fadein-left-enter-from,
-.slide-fadein-right-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
-.slide-fadein-left-leave-to,
-.slide-fadein-right-enter-from {
-  transform: translateX(-20px);
-  opacity: 0;
-}