blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat: improve leave animation timing function (#5954)

Browse Source
This commit is contained in:
neverland 2020-03-30 20:43:40 +08:00 committed by GitHub
parent d0132f23f3
commit b6d23cd9d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/number-keyboard/index.less
View File

@ -7,7 +7,6 @@
z-index: @number-keyboard-z-index;
width: 100%;
background-color: @number-keyboard-background-color;
animation-timing-function: ease-out;
user-select: none;
&__title {

14
src/popup/index.less
View File

@ -68,6 +68,20 @@
padding-bottom: env(safe-area-inset-bottom);
}
&-slide-top-enter-active,
&-slide-left-enter-active,
&-slide-right-enter-active,
&-slide-bottom-enter-active {
transition-timing-function: ease-out;
}
&-slide-top-leave-active,
&-slide-left-leave-active,
&-slide-right-leave-active,
&-slide-bottom-leave-active {
transition-timing-function: ease-in;
}
&-slide-top-enter,
&-slide-top-leave-active {
transform: translate3d(0, -100%, 0);

30
src/style/animation.less
View File

@ -80,50 +80,60 @@
.van-fade {
&-enter-active {
animation: @animation-duration-base van-fade-in;
animation: @animation-duration-base van-fade-in both
@animation-timing-function-enter;
}
&-leave-active {
animation: @animation-duration-base van-fade-out;
animation: @animation-duration-base van-fade-out both
@animation-timing-function-leave;
}
}
.van-slide-up {
&-enter-active {
animation: van-slide-up-enter @animation-duration-base both ease;
animation: van-slide-up-enter @animation-duration-base both
@animation-timing-function-enter;
}
&-leave-active {
animation: van-slide-up-leave @animation-duration-base both ease;
animation: van-slide-up-leave @animation-duration-base both
@animation-timing-function-leave;
}
}
.van-slide-down {
&-enter-active {
animation: van-slide-down-enter @animation-duration-base both ease;
animation: van-slide-down-enter @animation-duration-base both
@animation-timing-function-enter;
}
&-leave-active {
animation: van-slide-down-leave @animation-duration-base both ease;
animation: van-slide-down-leave @animation-duration-base both
@animation-timing-function-leave;
}
}
.van-slide-left {
&-enter-active {
animation: van-slide-left-enter @animation-duration-base both ease;
animation: van-slide-left-enter @animation-duration-base both
@animation-timing-function-enter;
}
&-leave-active {
animation: van-slide-left-leave @animation-duration-base both ease;
animation: van-slide-left-leave @animation-duration-base both
@animation-timing-function-leave;
}
}
.van-slide-right {
&-enter-active {
animation: van-slide-right-enter @animation-duration-base both ease;
animation: van-slide-right-enter @animation-duration-base both
@animation-timing-function-enter;
}
&-leave-active {
animation: van-slide-right-leave @animation-duration-base both ease;
animation: van-slide-right-leave @animation-duration-base both
@animation-timing-function-leave;
}
}

4
src/style/var.less
View File

@ -48,6 +48,8 @@
// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// Border
@border-color: @gray-3;
@ -531,7 +533,7 @@
// Popup
@popup-background-color: @white;
@popup-transition: transform @animation-duration-base ease-out;
@popup-transition: transform @animation-duration-base;
@popup-round-border-radius: 20px;
@popup-close-icon-size: 22px;
@popup-close-icon-color: @gray-5;