diff --git a/src/layout/components/Breadcrumb/index.vue b/src/layout/components/Breadcrumb/index.vue index 72be0e30..d1f65631 100644 --- a/src/layout/components/Breadcrumb/index.vue +++ b/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 { diff --git a/src/layout/components/SearchSidebar/index.vue b/src/layout/components/SearchSidebar/index.vue index 966ded3d..351af2fd 100644 --- a/src/layout/components/SearchSidebar/index.vue +++ b/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 { diff --git a/src/layout/index.vue b/src/layout/index.vue index be33c7f1..5b131ab4 100644 --- a/src/layout/index.vue +++ b/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;