feat: improve leave animation timing function (#5954)

src/style/animation.less

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

src/style/var.less

@@ -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;