style: 优化header隐藏效果

Tencent · Sep 5, 2024 · fa7d180 · fa7d180
1 parent 4e0edd2
commit fa7d180
Showing 1 changed file with 54 additions and 52 deletions.
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
@@ -4,15 +4,19 @@
       <t-layout key="side" :class="mainLayoutCls">
         <t-aside><layout-side-nav /></t-aside>
         <t-layout>
-          <t-header><layout-header /></t-header>
+          <Transition>
+            <t-header><layout-header /></t-header>
+          </Transition>
           <t-content><layout-content /></t-content>
         </t-layout>
       </t-layout>
     </template>
 
     <template v-else>
       <t-layout key="no-side">
-        <t-header><layout-header /> </t-header>
+        <Transition>
+          <t-header><layout-header /> </t-header>
+        </Transition>
         <t-layout :class="mainLayoutCls">
           <layout-side-nav />
           <layout-content />
@@ -27,7 +31,7 @@
 import '@/style/layout.less';
 
 import { storeToRefs } from 'pinia';
-import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { prefix } from '@/config/global';
@@ -42,6 +46,7 @@ const route = useRoute();
 const settingStore = useSettingStore();
 const tabsRouterStore = useTabsRouterStore();
 const setting = storeToRefs(settingStore);
+const showHeader = ref(true);
 
 const mainLayoutCls = computed(() => [
   {
@@ -59,66 +64,55 @@ const appendNewRoute = () => {
   tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true, meta: route.meta });
 };
 
-// 在操作监听过程中，如果已经隐藏了，就不再进行隐藏的dom操作// 如果已经显示了，就不再进行显示的dom操作
-let alreadyHidden = false;
-let alreadyShow = false;
+const toggleHeadVisibleScrollListener = () => {
+  const targetElement = document.querySelector(`.${prefix}-layout`);
+  const headerElement = document.querySelector(`header`);
 
-const toggleHeadVisible = () => {
-  const layoutElement = document.querySelector(`.${prefix}-layout`);
+  const toggleHeadVisible = () => {
+    const layoutElement = document.querySelector(`.${prefix}-layout`);
+    const headerMenuElement = document.querySelector(`.${prefix}-header-menu-fixed`);
 
-  if (layoutElement) {
-    const { scrollTop } = layoutElement;
-    const headerMenuFixedElement = document.querySelector(`.${prefix}-header-menu-fixed`);
-    const headerMenuFixedElementHeight = headerMenuFixedElement.scrollHeight;
+    if (layoutElement) {
+      const { scrollTop } = layoutElement;
 
-    // 当面包屑存在时 fixed在头部
-    if (settingStore.showBreadcrumb) {
-      document.querySelector(`.t-layout__header`)?.setAttribute('style', `position:relative;`);
-      const breadcrumbElement = document.querySelector(`.t-breadcrumb`);
+      // 当面包屑存在时 面包屑存在时fixed在头部
+      if (settingStore.showBreadcrumb) {
+        const headerMenuFixedElementHeight = headerMenuElement?.scrollHeight || 0;
+        document.querySelector(`.t-layout__header`)?.setAttribute('style', `position:relative;`);
+        const breadcrumbElement = document.querySelector(`.t-breadcrumb`);
 
-      if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
-        if (!alreadyHidden) {
-          headerMenuFixedElement.setAttribute('style', 'display: none;');
+        if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
+          headerMenuElement.setAttribute('style', 'display: none;');
           breadcrumbElement.setAttribute('style', 'position:absolute;top:18px;');
-        }
-        alreadyHidden = true;
-        alreadyShow = false;
-      } else {
-        if (!alreadyShow) {
-          headerMenuFixedElement.setAttribute('style', null);
+        } else {
+          headerMenuElement.setAttribute('style', null);
           breadcrumbElement.setAttribute('style', null);
         }
-        alreadyHidden = false;
-        alreadyShow = true;
-      }
-    } else {
-      const headerElement = document.querySelector(`.t-layout__header`);
-      const sideNavMixFixedElement = document.querySelector(`.${prefix}-side-nav-mix-fixed`);
-
-      if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
-        if (!alreadyHidden) {
-          headerElement.setAttribute('style', 'display: none;');
-          // (layoutElement as HTMLElement).style.height = '100vh';
-
-          sideNavMixFixedElement?.setAttribute('style', 'top: 0;');
-        }
-        alreadyHidden = true;
-        alreadyShow = false;
       } else {
-        if (!alreadyShow) {
-          headerElement.setAttribute('style', null);
-          // (layoutElement as HTMLElement).style.height = 'calc(100vh - var(--td-comp-size-xxxl))';
-          sideNavMixFixedElement?.setAttribute('style', null);
+        const sideNavMixFixedElement = document.querySelector(`.${prefix}-side-nav-mix-fixed`);
+
+        if (scrollTop > 50 && settingStore.toggleHeadVisible) {
+          headerElement.style.transform = 'translate3d(0, -100%, 0)';
+          headerElement.style.height = '0px';
+          headerElement.style.overflow = 'hidden';
+
+          (layoutElement as HTMLElement).style.height = '100vh';
+          const htmlElement = document.querySelector('html');
+          htmlElement.style.overflowY = 'hidden';
+
+          if (sideNavMixFixedElement) {
+            (sideNavMixFixedElement as HTMLElement).style.top = '0';
+          }
+        } else {
+          headerElement?.setAttribute('style', null);
+          if (sideNavMixFixedElement) {
+            sideNavMixFixedElement?.setAttribute('style', null);
+          }
         }
-        alreadyHidden = false;
-        alreadyShow = true;
       }
     }
-  }
-};
+  };
 
-const toggleHeadVisibleScrollListener = () => {
-  const targetElement = document.querySelector(`.${prefix}-layout`);
   if (targetElement) {
     targetElement.addEventListener('scroll', toggleHeadVisible);
   }
@@ -148,4 +142,12 @@ watch(
 );
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+header {
+  transition:
+    height 0.3s ease-in-out,
+    transform 0.6s,
+    opacity 0.6s;
+  // transform: translateZ(0);
+}
+</style>