refactor: 调整动效

Author: hooray

src/layouts/components/SubSidebar/index.vue

@@ -43,38 +43,40 @@ watch(() => menuStore.actived, (val, oldVal) => {
 </script>
 
 <template>
-  <div
-    v-if="enableSidebar" class="sub-sidebar-container" :class="{
-      'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
-    }"
-  >
-    <component :is="useSlots('sub-sidebar-top')" />
-    <Logo
-      v-if="['side', 'single'].includes(settingsStore.settings.menu.mode)" :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
-        single: settingsStore.settings.menu.mode === 'single',
+  <Transition name="sub-sidebar">
+    <div
+      v-if="enableSidebar" class="sub-sidebar-container" :class="{
+        'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
       }"
-    />
-    <component :is="useSlots('sub-sidebar-after-logo')" />
-    <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
-      <TransitionGroup :name="transitionName">
-        <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
-          <div v-show="mainIndex === menuStore.actived">
-            <Menu
-              :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
-                '-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
-              }"
-            />
-          </div>
-        </template>
-      </TransitionGroup>
-    </FaScrollArea>
-    <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
-      <FaButton v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" variant="secondary" size="icon" class="h-8 w-8 transition" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
-        <FaIcon name="toolbar-collapse" class="size-4" />
-      </FaButton>
+    >
+      <component :is="useSlots('sub-sidebar-top')" />
+      <Logo
+        v-if="['side', 'single'].includes(settingsStore.settings.menu.mode)" :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
+          single: settingsStore.settings.menu.mode === 'single',
+        }"
+      />
+      <component :is="useSlots('sub-sidebar-after-logo')" />
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
+        <TransitionGroup :name="transitionName">
+          <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
+            <div v-show="mainIndex === menuStore.actived">
+              <Menu
+                :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
+                  '-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
+                }"
+              />
+            </div>
+          </template>
+        </TransitionGroup>
+      </FaScrollArea>
+      <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
+        <FaButton v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" variant="secondary" size="icon" class="h-8 w-8 transition" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+          <FaIcon name="toolbar-collapse" class="size-4" />
+        </FaButton>
+      </div>
+      <component :is="useSlots('sub-sidebar-bottom')" />
     </div>
-    <component :is="useSlots('sub-sidebar-bottom')" />
-  </div>
+  </Transition>
 </template>
 
 <style scoped>
@@ -147,4 +149,15 @@ watch(() => menuStore.actived, (val, oldVal) => {
 .sub-sidebar-y-end-leave-active {
   position: absolute;
 }
+
+/* 次侧边栏动画 */
+.sub-sidebar-enter-active,
+.sub-sidebar-leave-active {
+  transition: 0.3s;
+}
+
+.sub-sidebar-enter-from,
+.sub-sidebar-leave-to {
+  transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+}
 </style>

src/layouts/index.vue

@@ -185,7 +185,9 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
     transition: width 0.3s, transform 0.3s, box-shadow 0.3s, top 0.3s;
 
     &:has(> .main-sidebar-container.main-sidebar-enter-active),
-    &:has(> .main-sidebar-container.main-sidebar-leave-active) {
+    &:has(> .main-sidebar-container.main-sidebar-leave-active),
+    &:has(> .sub-sidebar-container.sub-sidebar-enter-active),
+    &:has(> .sub-sidebar-container.sub-sidebar-leave-active) {
       overflow: hidden;
     }
   }

src/ui/components/FaSmartFixedBlock/index.vue

@@ -22,7 +22,7 @@ defineProps<{
   width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
   padding-right: var(--scrollbar-width, 0);
   transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
-  transition: width 0.3s, max-width 0.3s, transform 0.3s;
+  transition: width 0.3s, max-width 0.3s, transform 0.3s, top 0.3s;
 
   &.top {
     top: var(--g-header-actual-height);