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

[improvement] add animation-duration less vars (#3916)

Browse Source
This commit is contained in:
neverland 2019-07-21 15:56:18 +08:00 committed by GitHub
parent 6bfd53e435
commit e8c528a6f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/style/animation.less
View File

@ -1,3 +1,5 @@
@import "./var";
@keyframes van-slide-up-enter {
from {
transform: translate3d(0, 100%, 0);
@ -78,50 +80,50 @@
.van-fade {
&-enter-active {
animation: .3s van-fade-in;
animation: @animation-duration-base van-fade-in;
}
&-leave-active {
animation: .3s van-fade-out;
animation: @animation-duration-base van-fade-out;
}
}
.van-slide-up {
&-enter-active {
animation: van-slide-up-enter .3s both ease;
animation: van-slide-up-enter @animation-duration-base both ease;
}
&-leave-active {
animation: van-slide-up-leave .3s both ease;
animation: van-slide-up-leave @animation-duration-base both ease;
}
}
.van-slide-down {
&-enter-active {
animation: van-slide-down-enter .3s both ease;
animation: van-slide-down-enter @animation-duration-base both ease;
}
&-leave-active {
animation: van-slide-down-leave .3s both ease;
animation: van-slide-down-leave @animation-duration-base both ease;
}
}
.van-slide-left {
&-enter-active {
animation: van-slide-left-enter .3s both ease;
animation: van-slide-left-enter @animation-duration-base both ease;
}
&-leave-active {
animation: van-slide-left-leave .3s both ease;
animation: van-slide-left-leave @animation-duration-base both ease;
}
}
.van-slide-right {
&-enter-active {
animation: van-slide-right-enter .3s both ease;
animation: van-slide-right-enter @animation-duration-base both ease;
}
&-leave-active {
animation: van-slide-right-leave .3s both ease;
animation: van-slide-right-leave @animation-duration-base both ease;
}
}

16
src/style/var.less
View File

@ -33,6 +33,10 @@
@font-size-md: 14px;
@font-size-lg: 16px;
// Animation
@animation-duration-base: .3s;
@animation-duration-fast: .2s;
// ActionSheet
@action-sheet-max-height: 90%;
@action-sheet-header-height: 44px;
@ -148,7 +152,7 @@
// Checkbox
@checkbox-size: 20px;
@checkbox-border-color: @gray-light;
@checkbox-transition-duration: .2s;
@checkbox-transition-duration: @animation-duration-fast;
@checkbox-label-margin: @padding-xs;
@checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue;
@ -160,7 +164,7 @@
@circle-text-color: @text-color;
// Collapse
@collapse-item-transition-duration: .3s;
@collapse-item-transition-duration: @animation-duration-base;
@collapse-item-content-padding: @padding-md;
@collapse-item-content-font-size: 13px;
@collapse-item-content-line-height: 1.5;
@ -222,7 +226,7 @@
// Dialog
@dialog-width: 85%;
@dialog-font-size: @font-size-lg;
@dialog-transition: .3s;
@dialog-transition: @animation-duration-base;
@dialog-border-radius: 4px;
@dialog-background-color: @white;
@dialog-header-font-weight: 500;
@ -413,7 +417,7 @@
// Popup
@popup-background-color: @white;
@popup-transition: .3s ease-out;
@popup-transition: @animation-duration-base ease-out;
@popup-round-border-radius: 12px;
// Progress
@ -432,7 +436,7 @@
// Radio
@radio-size: 20px;
@radio-border-color: @gray-light;
@radio-transition-duration: .2s;
@radio-transition-duration: @animation-duration-fast;
@radio-label-margin: @padding-xs;
@radio-label-color: @text-color;
@radio-checked-icon-color: @blue;
@ -554,7 +558,7 @@
@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
@switch-background-color: @white;
@switch-on-background-color: @blue;
@switch-transition-duration: .3s;
@switch-transition-duration: @animation-duration-base;
@switch-disabled-opacity: .4;
@switch-border: 1px solid rgba(0, 0, 0, .1);