fix: 修复路由切换时过渡动画异常的问题 (#666)

This commit is contained in:
mokeyjay 2024-01-16 15:13:44 +08:00 committed by GitHub
parent b73708b6b4
commit 860415dcae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 4 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<t-config-provider :global-config="getComponentsLocale"> <t-config-provider :global-config="getComponentsLocale">
<router-view :key="locale" :class="[mode]" <router-view :key="locale" :class="[mode]" />
/></t-config-provider> </t-config-provider>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';

View File

@ -1,6 +1,6 @@
<template> <template>
<router-view v-if="!isRefreshing" v-slot="{ Component }"> <router-view v-if="!isRefreshing" v-slot="{ Component }">
<transition name="fade"> <transition name="fade" mode="out-in">
<keep-alive :include="aliveViews"> <keep-alive :include="aliveViews">
<component :is="Component" /> <component :is="Component" />
</keep-alive> </keep-alive>
@ -54,7 +54,7 @@ const isRefreshing = computed(() => {
transition: opacity @anim-duration-slow @anim-time-fn-easing; transition: opacity @anim-duration-slow @anim-time-fn-easing;
} }
.fade-enter, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }