perf: optimize multiple-tab switching effect

This commit is contained in:
vben
2020-10-12 00:18:32 +08:00
parent 949db9639f
commit f2bdf0b86d
10 changed files with 72 additions and 17 deletions

View File

@@ -1,11 +1,11 @@
.transition-default() {
&-enter-active,
&-leave-active {
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
transition: 0.2s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
&-move {
transition: transform 0.6s;
transition: transform 0.5s;
}
}

View File

@@ -1,6 +1,6 @@
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.38s;
transition: all 0.24s;
}
.breadcrumb-enter-from,

View File

@@ -1,6 +1,6 @@
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
@@ -11,7 +11,7 @@
// side-fade
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: opacity 0.35s, transform 0.4s;
transition: opacity 0.3s, transform 0.35s;
}
.slide-enter-from,
@@ -32,7 +32,7 @@
// Speed: 1x
.fade-bottom-enter-active,
.fade-bottom-leave-active {
transition: opacity 0.3s, transform 0.35s;
transition: opacity 0.2s, transform 0.25s;
}
.fade-bottom-enter-from,
@@ -53,7 +53,7 @@
// Speed: 1x
.fade-top-enter-active,
.fade-top-leave-active {
transition: opacity 0.3s, transform 0.35s;
transition: opacity 0.2s, transform 0.25s;
}
.fade-top-enter-from {

View File

@@ -1,7 +1,7 @@
// zoom-out
.zoom-out-enter-active,
.zoom-out-leave-active {
transition: opacity 0.35s ease-in-out, transform 0.45s ease-out;
transition: opacity 0.2 ease-in-out, transform 0.2s ease-out;
}
.zoom-out-enter-from,
@@ -13,7 +13,7 @@
// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.35s, opacity 0.35s ease-out;
transition: transform 0.2s, opacity 0.2s ease-out;
}
.zoom-fade-enter-from {