style: fix animation css vars not work (#9337)

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);
   }
 }