19yuke2-project/19yuke2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pref: fix fade transition

Browse Source
This commit is contained in:
thehrz 2023-08-13 14:06:11 +08:00
parent d796ffa08c
commit 54ac696913
Signed by: thehrz
GPG Key ID: C84CBCE7D5F88855
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layouts/default.vue
View File

@ -2,14 +2,14 @@
<v-app class="flex flex-col"> <v-app class="flex flex-col">
<Nav /> <Nav />
<v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;"> <div style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
<div class="prose max-w-110ch m-auto p-3">
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade"> <transition name="fade" mode="out-in">
<component :is="Component" :key="route.path" /> <div :key="route.path" class="prose max-w-110ch m-auto p-3">
<component :is="Component" />
</div>
</transition> </transition>
</router-view> </router-view>
</div> </div>
</v-main>
</v-app> </v-app>
</template> </template>

6
src/layouts/index.vue
View File

@ -3,9 +3,9 @@
<Nav /> <Nav />
<div style="--v-layout-top: 25px" class="m-auto"> <div style="--v-layout-top: 25px" class="m-auto">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component, route }">
<transition name="fade"> <transition name="fade" mode="out-in">
<div class=""> <div :key="route.path" class="prose max-w-110ch m-auto p-3">
<component :is="Component" /> <component :is="Component" />
</div> </div>
</transition> </transition>

2
src/styles/main.css
View File

@ -28,7 +28,7 @@ body,
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s ease; transition: opacity 0.3s ease;
} }
.fade-enter-from, .fade-enter-from,