fix: header animat

Author: kokoroli

src/components/GlobalHeader/GlobalHeader.vue

@@ -1,25 +1,28 @@
 <template>
-  <a-layout-header
-    v-if="visible"
-    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
-    :style="{ padding: '0' }"
-  >
-    <div v-if="mode === 'sidemenu'" class="header">
-      <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
-      <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
-      <user-menu></user-menu>
-    </div>
-    <div v-else :class="['top-nav-header-index', theme]">
-      <div class="header-index-wide">
-        <div class="header-index-left">
-          <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
-          <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
-          <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
+  <transition name="showHeader">
+    <div v-if="visible" class="header-animat">
+      <a-layout-header
+        v-if="visible"
+        :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
+        :style="{ padding: '0' }">
+        <div v-if="mode === 'sidemenu'" class="header">
+          <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
+          <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
+          <user-menu></user-menu>
+        </div>
+        <div v-else :class="['top-nav-header-index', theme]">
+          <div class="header-index-wide">
+            <div class="header-index-left">
+              <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
+              <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
+              <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
+            </div>
+            <user-menu class="header-index-right"></user-menu>
+          </div>
         </div>
-        <user-menu class="header-index-right"></user-menu>
-      </div>
+      </a-layout-header>
     </div>
-  </a-layout-header>
+  </transition>
 </template>
 
 <script>
@@ -102,3 +105,19 @@ export default {
   }
 }
 </script>
+
+<style lang="less">
+.header-animat{
+  position: relative;
+  z-index: 999;
+}
+.showHeader-enter-active {
+  transition: all 0.25s ease;
+}
+.showHeader-leave-active {
+  transition: all 0.5s ease;
+}
+.showHeader-enter, .showHeader-leave-to {
+  opacity: 0;
+}
+</style>