优化菜单栏导航动画

Author: konglingwen94

src/App.vue

@@ -3,15 +3,15 @@
     <header>
       <Header
         @animationstart.native="onAnimationStart"
-        ref="header"
-        :class="animationName"
+        :class="{[animationName]:$route.name==='home'}"
         :fixedToTop="$route.path === '/'"
+        ref="header"
         :theme-color="themeColor"
       ></Header>
     </header>
     <main>
       <transition appear :name="pageTransitionName">
-        <keep-alive :exclude="['resume','resume-editor','job']" :max="30">
+        <keep-alive :exclude="['resume','resume-editor','job','user']" :max="30">
           <router-view :key="$route.path"></router-view>
         </keep-alive>
       </transition>
@@ -61,15 +61,9 @@ export default {
   },
   watch: {
     $route(newRoute) {
-      if (
-        ["jobs", "user", "resume", "jobDetail", "resume-editor"].includes(
-          newRoute.name
-        )
-      ) {
-        this.pageTransitionName = "jumpPage";
-      } else {
-        this.pageTransitionName = "";
-      }
+      this.pageTransitionName = ["products", "home"].includes(newRoute.name)
+        ? ""
+        : "jumpPage";
     }
   },
   methods: {

src/components/header.vue

@@ -44,7 +44,7 @@
           </li>
           <li class="dropdown-menu__item" @click="handleLogout">退出</li>
 
-          <!-- <li class="dropdown-menu__item">退出</li> -->
+          
         </ul>
       </div>
     </div>
@@ -64,7 +64,7 @@ export default {
         if (!isLogin) {
           store.expireLogin();
         } else if (isLogin && !this.state.userInfo.email) {
-          console.log(this.state.userInfo.email);
+           
           store
             .requestUserInfo()
             .then(res => {})
@@ -107,8 +107,8 @@ export default {
   height: 60px;
   align-items: center;
   padding: 10px 100px;
-  // position: relative;
-  z-index: 1000;
+   
+  
   &.fixedToTop {
     position: fixed;
 

src/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter);
 const routes = [
   {
     path: "/",
-    name: "Home",
+    name: "home",
     component: () => import(/*webpackChunkName: "Home" */ "@/views/Home.vue"),
   },
   {

src/views/Home.vue

@@ -250,9 +250,7 @@ export default {
 };
 </script>
 
-<style>
-/* @import "../assets/transition.css";  */
-</style>
+ 
 
 <style lang="less" scoped>
 @keyframes verticalMotion {
@@ -273,9 +271,7 @@ export default {
 
   100% {
     left: 100%;
-    // right:100%;
-    // transform: translateX(100%);
-    // width: 50%;
+    
   }
 }
 
@@ -355,7 +351,7 @@ export default {
     height: 100px;
     display: flex;
     flex-direction: column;
-    /* justify-content: center; */
+    
     align-items: center;
     .arrow-down {
       margin-bottom: 4px;
@@ -375,6 +371,7 @@ export default {
         font-style: normal;
       }
     }
+    // 分割竖线
     .vertical-dashed {
       border-left: 1px dashed #fff;
       height: 30px;
@@ -601,7 +598,7 @@ export default {
     }
   }
 }
-
+// 员工故事
 .staffStory {
   padding: 0 140px;
   .title {

src/views/User.vue

@@ -151,7 +151,7 @@ export default {
       this.mobileCode = response.data.mobile_code;
     });
   },
-
+   
   methods: {
     async handlerLogin() {
       if (this.loginMode !== "email") {