From e8c528a6f6e2887d2eed91036ee456b0a02cdf3d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 21 Jul 2019 15:56:18 +0800
Subject: [PATCH] [improvement] add animation-duration less vars (#3916)

---
 src/style/animation.less | 22 ++++++++++++----------
 src/style/var.less       | 16 ++++++++++------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/style/animation.less b/src/style/animation.less
index ce04b672f..37fce7f54 100644
--- a/src/style/animation.less
+++ b/src/style/animation.less
@@ -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;
   }
 }
diff --git a/src/style/var.less b/src/style/var.less
index 4c41ff679..3797fa412 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -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);