perf: optimize the issue of animation when switching setting tabs (#748)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

优化主题和插件详情页面切换 tab 时的页面闪动问题。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2856

#### Special notes for your reviewer:

测试方式：检查在主题和插件详情页面是否还存在 https://github.com/halo-dev/halo/issues/2856 中提到的问题。

#### Does this PR introduce a user-facing change?

```release-note
优化 Console 端的主题和插件详情页面切换选项卡时的页面闪动问题。
```

src/modules/interface/themes/ThemeDetail.vue

@@ -55,7 +55,7 @@ const onUpgradeModalClose = () => {
 </script>
 
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div>
       <div class="bg-white px-4 py-4 sm:px-6">
         <div class="group flex items-center justify-between">

src/modules/interface/themes/ThemeSetting.vue

@@ -53,7 +53,7 @@ watch(
 );
 </script>
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div class="bg-white p-4">
       <div>
         <FormKit

src/modules/system/plugins/PluginDetail.vue

@@ -59,7 +59,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div>
       <div class="flex items-center justify-between bg-white px-4 py-4 sm:px-6">
         <div>

src/modules/system/plugins/PluginSetting.vue

@@ -62,7 +62,7 @@ const handleFetchPlugin = async () => {
 await handleFetchPlugin();
 </script>
 <template>
-  <Transition appear mode="out-in" name="fade">
+  <Transition mode="out-in" name="fade">
     <div class="bg-white p-4">
       <div>
         <FormKit

src/modules/system/settings/SystemSetting.vue

@@ -33,7 +33,6 @@ await handleFetchSettings();
 await handleFetchConfigMap();
 </script>
 <template>
-  <Transition appear mode="out-in" name="fade">
   <div class="bg-white p-4">
     <div>
       <FormKit
@@ -46,10 +45,7 @@ await handleFetchConfigMap();
         type="form"
         @submit="handleSaveConfigMap"
       >
-          <FormKitSchema
-            :schema="formSchema"
-            :data="configMapFormData[group]"
-          />
+        <FormKitSchema :schema="formSchema" :data="configMapFormData[group]" />
       </FormKit>
     </div>
     <div v-permission="['system:configmaps:manage']" class="pt-5">
@@ -64,5 +60,4 @@ await handleFetchConfigMap();
       </div>
     </div>
   </div>
-  </Transition>
 </template>

src/modules/system/settings/layouts/SystemSettingsLayout.vue

@@ -113,12 +113,14 @@ watch([() => route.name, () => route.params], async () => {
       <div class="bg-white">
         <RouterView :key="activeTab" v-slot="{ Component }">
           <template v-if="Component">
+            <Transition appear mode="out-in" name="fade">
               <Suspense>
                 <component :is="Component"></component>
                 <template #fallback>
                   <VLoading />
                 </template>
               </Suspense>
+            </Transition>
           </template>
         </RouterView>
       </div>