refactor: move absolute to transition classes (#114)

* feat: another way to achieve page switching animation

* refactor: move absolute to transition classes

---------

Co-authored-by: CharleeWa <18888351756@163.com>

Author: faukwaa

src/components/Container.vue

@@ -21,10 +21,10 @@ const title = computed(() => {
 
 <template>
   <VanNavBar
-    v-show="title"
+    v-if="title"
     :title="title"
     :fixed="true"
-    clickable left-arrow
+    clickable left-arrow placeholder
     @click-left="onBack"
   />
 </template>

src/components/NavBar.vue

@@ -11,7 +11,7 @@ const display = computed(() => {
 </script>
 
 <template>
-  <van-tabbar v-show="display" v-model="active" route>
+  <van-tabbar v-if="display" v-model="active" route placeholder>
     <van-tabbar-item replace to="/">
       {{ t('layouts.home') }}
       <template #icon>

src/components/TabBar.vue

@@ -17,7 +17,7 @@ function onBack() {
 </script>
 
 <template>
-  <Container>
+  <div class="p-16">
     <div text="center gray-300 dark:gray-200 18">
       <van-icon name="warn-o" size="3em" />
       <div> Not found </div>
@@ -28,5 +28,5 @@ function onBack() {
         </button>
       </div>
     </div>
-  </Container>
+  </div>
 </template>

src/pages/[...all].vue

@@ -69,9 +69,9 @@ const refScoreOption = ref(scoreOption)
 </script>
 
 <template>
-  <Container>
+  <div class="p-16">
     <Chart :option="refBarOption" :style="{ height: '330px' }" />
     <Chart :option="refLineOption" :style="{ height: '330px' }" />
     <Chart :option="refScoreOption" :style="{ height: '330px' }" />
-  </Container>
+  </div>
 </template>

src/pages/charts/index.vue

@@ -20,7 +20,7 @@ function add() {
 </script>
 
 <template>
-  <Container>
+  <div class="p-16">
     <h1 class="text-6xl color-pink font-semibold">
       Hello, Pinia!
     </h1>
@@ -37,5 +37,5 @@ function add() {
     <button class="btn" @click="add">
       Add
     </button>
-  </container>
+  </div>
 </template>

src/pages/counter/index.vue

@@ -48,7 +48,7 @@ const menuItems = computed(() => ([
 </script>
 
 <template>
-  <Container :padding-x="0">
+  <div class="pt-46">
     <VanCellGroup inset>
       <VanCell center :title="t('home.darkMode')">
         <template #right-icon>
@@ -76,5 +76,5 @@ const menuItems = computed(() => ([
         <VanCell :title="item.title" :to="item.route" is-link />
       </template>
     </VanCellGroup>
-  </Container>
+  </div>
 </template>

src/pages/index.vue

@@ -17,8 +17,8 @@ const value = ref(1)
 </script>
 
 <template>
-  <Container>
+  <div class="p-16">
     <p>{{ $t('keepAlive.label') }}</p>
     <van-stepper v-model="value" />
-  </Container>
+  </div>
 </template>

src/pages/keepalive/index.vue

@@ -21,7 +21,7 @@ function pull() {
 </script>
 
 <template>
-  <Container>
+  <div class="p-16">
     <div class="data-label">
       {{ $t('mock.fromAsyncData') }}
     </div>
@@ -41,7 +41,7 @@ function pull() {
         {{ $t('mock.reset') }}
       </VanButton>
     </van-space>
-  </Container>
+  </div>
 </template>
 
 <style lang="less" scoped>

src/pages/mock/index.vue

@@ -10,9 +10,9 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <Container pb-60>
+  <div class="p-16 pt-46">
     <div mx-auto pt-15 text-center text-16 text-dark dark:text-white>
       {{ t('profile.placeholder') }}
     </div>
-  </Container>
+  </div>
 </template>