[design] improve bounce animation

This commit is contained in:
Kombie 2020-07-18 13:51:27 +01:00 committed by GitHub
parent 6fbd8d4d2d
commit 8ad199cc15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 7 deletions

View File

@ -72,9 +72,9 @@
height: 2.5em;
width: 15em;
transition:
width var(--layout-transition-extra-fast) var(--layout-duration-04),
width var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-04),
height var(--layout-transition-extra-fast),
margin var(--layout-transition-extra-fast) var(--layout-duration-04);
margin var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-04);
}
.is-group-area-justify-center .group-header-item-control:not(:only-child):not(:last-child),

View File

@ -903,12 +903,12 @@
.is-edit.is-link-orientation-top .link-control {
top: 0;
transition: top var(--layout-duration-05) var(--layout-timing-bounce);
transition: top var(--layout-duration-04) var(--layout-timing-bounce);
}
.is-edit.is-link-orientation-bottom .link-control {
bottom: 0;
transition: bottom var(--layout-duration-05) var(--layout-timing-bounce);
transition: bottom var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-01);
}
.link-control-item {
@ -1043,7 +1043,7 @@
overflow: hidden;
display: none;
align-items: center;
transition: top var(--layout-transition-extra-fast), bottom var(--layout-transition-extra-fast);
transition: top var(--layout-transition-extra-fast), bottom var(--layout-duration-04) var(--layout-timing-bounce);
}
.is-link-orientation-top .link-url {

View File

@ -63,7 +63,7 @@
.is-theme-custom-edit .theme-custom-control {
bottom: 0;
transition: bottom var(--layout-duration-05) var(--layout-timing-bounce);
transition: bottom var(--layout-duration-04) var(--layout-timing-bounce) var(--layout-duration-01);
}
.theme-custom-control .theme-custom-control-item {

View File

@ -147,7 +147,7 @@
--layout-duration-09: 0.9s;
--layout-duration-10: 1s;
--layout-timing-ease: ease-in-out;
--layout-timing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--layout-timing-bounce: cubic-bezier(0.8, 0.8, 0.4, 1.4);
--layout-transition-extra-fast: var(--layout-duration-02) var(--layout-timing-ease);
--layout-transition-fast: var(--layout-duration-04) var(--layout-timing-ease);
--layout-transition-medium: var(--layout-duration-06) var(--layout-timing-ease);