优化整站动效速度

src/layout/components/Breadcrumb/index.vue

@@ -56,7 +56,7 @@ export default {
     justify-content: space-between;
     height: $g-breadcrumb-height;
     background-color: #fff;
-    transition: 0.3s;
+    transition: 0.3s, box-shadow 0.2s;
     box-shadow: 0 0 1px 0 #ccc;
     &.shadow {
         box-shadow: 0 10px 10px -10px #ccc;
@@ -105,7 +105,7 @@ export default {
 }
 // 面包屑动画
 .breadcrumb-enter-active {
-    transition: all 0.3s;
+    transition: all 0.25s;
 }
 .breadcrumb-enter,
 .breadcrumb-leave-active {

src/layout/components/SearchSidebar/index.vue

@@ -159,7 +159,7 @@ export default {
     height: 100%;
     background-color: rgba($color: #000, $alpha: 0.5);
     backdrop-filter: blur(10px);
-    transition: all 0.3s;
+    transition: all 0.2s;
     transform: translateZ(0);
     opacity: 0;
     visibility: hidden;
@@ -177,7 +177,7 @@ export default {
         max-width: 800px;
         height: 100%;
         margin: 0 auto;
-        transition: all 0.3s;
+        transition: all 0.2s;
         transform: scale(1.1);
         filter: blur(10px);
         .search-box {

src/layout/index.vue

@@ -262,6 +262,7 @@ header {
         background-color: $g-main-sidebar-bg;
         color: #fff;
         .sidebar-logo {
+            transition: 0.3s;
             background-color: $g-main-sidebar-bg;
         }
         .nav {
@@ -311,7 +312,7 @@ header {
         }
         .sidebar-logo {
             background: $g-sub-sidebar-bg;
-            transition: box-shadow 0.5s;
+            transition: box-shadow 0.2s, background-color 0.3s, color 0.3s;
             &:not(.sidebar-logo-bg) {
                 ::v-deep span {
                     color: $g-sub-sidebar-menu-color;
@@ -327,6 +328,7 @@ header {
         .el-menu {
             border-right: 0;
             padding-top: $g-breadcrumb-height;
+            transition: border-color 0.3s, background-color 0.3s, color 0.3s;
             &:not(.el-menu--collapse) {
                 width: inherit;
             }
@@ -393,7 +395,7 @@ header + .wrapper {
 
 // 侧边栏动画
 .sidebar-enter-active {
-    transition: all 0.3s;
+    transition: all 0.2s;
 }
 .sidebar-enter,
 .sidebar-leave-active {
@@ -405,9 +407,11 @@ header + .wrapper {
 }
 
 // 主内容区动画
-.main-enter-active,
+.main-enter-active {
+    transition: all 0.2s;
+}
 .main-leave-active {
-    transition: all 0.3s;
+    transition: all 0.15s;
 }
 .main-enter {
     opacity: 0;