From 229695cadc7f01f4ad3346da1513c770808475e8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 26 Aug 2021 10:21:26 +0800
Subject: [PATCH] style: fix animation css vars not work (#9337)

---
 src/progress/index.less  |  6 ++++--
 src/style/animation.less | 40 ++++++++++++++++++++--------------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/progress/index.less b/src/progress/index.less
index 75f24cad3..3816ac9e4 100644
--- a/src/progress/index.less
+++ b/src/progress/index.less
@@ -25,7 +25,8 @@
     background: var(--van-progress-color);
     border-radius: inherit;
     transform-origin: 0;
-    transition: all 0.3s ease-out;
+    transition: all var(--van-animation-duration-base)
+      var(--van-animation-timing-function-enter);
   }
 
   &__pivot {
@@ -41,6 +42,7 @@
     word-break: keep-all;
     background-color: var(--van-progress-pivot-background-color);
     border-radius: 1em;
-    transition: all 0.3s ease-out;
+    transition: all var(--van-animation-duration-base)
+      var(--van-animation-timing-function-enter);
   }
 }
diff --git a/src/style/animation.less b/src/style/animation.less
index db2485f8c..0147d982a 100644
--- a/src/style/animation.less
+++ b/src/style/animation.less
@@ -80,60 +80,60 @@
 
 .van-fade {
   &-enter-active {
-    animation: @animation-duration-base van-fade-in both
-      @animation-timing-function-enter;
+    animation: var(--van-animation-duration-base) van-fade-in both
+      var(--van-animation-timing-function-enter);
   }
 
   &-leave-active {
-    animation: @animation-duration-base van-fade-out both
-      @animation-timing-function-leave;
+    animation: var(--van-animation-duration-base) van-fade-out both
+      var(--van-animation-timing-function-leave);
   }
 }
 
 .van-slide-up {
   &-enter-active {
-    animation: van-slide-up-enter @animation-duration-base both
-      @animation-timing-function-enter;
+    animation: van-slide-up-enter var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-enter);
   }
 
   &-leave-active {
-    animation: van-slide-up-leave @animation-duration-base both
-      @animation-timing-function-leave;
+    animation: van-slide-up-leave var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-leave);
   }
 }
 
 .van-slide-down {
   &-enter-active {
-    animation: van-slide-down-enter @animation-duration-base both
-      @animation-timing-function-enter;
+    animation: van-slide-down-enter var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-enter);
   }
 
   &-leave-active {
-    animation: van-slide-down-leave @animation-duration-base both
-      @animation-timing-function-leave;
+    animation: van-slide-down-leave var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-leave);
   }
 }
 
 .van-slide-left {
   &-enter-active {
-    animation: van-slide-left-enter @animation-duration-base both
-      @animation-timing-function-enter;
+    animation: van-slide-left-enter var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-enter);
   }
 
   &-leave-active {
-    animation: van-slide-left-leave @animation-duration-base both
-      @animation-timing-function-leave;
+    animation: van-slide-left-leave var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-leave);
   }
 }
 
 .van-slide-right {
   &-enter-active {
-    animation: van-slide-right-enter @animation-duration-base both
-      @animation-timing-function-enter;
+    animation: van-slide-right-enter var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-enter);
   }
 
   &-leave-active {
-    animation: van-slide-right-leave @animation-duration-base both
-      @animation-timing-function-leave;
+    animation: van-slide-right-leave var(--van-animation-duration-base) both
+      var(--van-animation-timing-function-leave);
   }
 }