221213

nuxt-demo/app/components/AppHead/index.vue

@@ -112,9 +112,17 @@ const proList = [
           text-decoration: none;
           &:before{
             background-color: #1d78ff;
+            left: 50%;
+            right: 50%;
           }
         }
 
+        &.active a:before,
+        &:hover a:before{
+          left: 0;
+          right: 0;
+        }
+
         &.active a{
           color: #222222;
 
@@ -211,12 +219,12 @@ const proList = [
             content: "";
             position: absolute;
             z-index: 1;
-            -webkit-transition-property: left, right;
-            transition-property: left, right;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             bottom: 0;
             background-color: #ffffff;
             height: 2px;
-            width: 100%;
+            left: 50%;
+            right: 50%;
             border-radius: 2px 2px 0 0;
             opacity: 0;
           }
@@ -227,6 +235,7 @@ const proList = [
             &:before{
               opacity: 1;
               left: 0;
+              right: 0;
             }
           }
         }
@@ -235,6 +244,7 @@ const proList = [
             &:before{
               opacity: 1;
               left: 0;
+              right: 0;
             }
           }
         }