feat: improve leave animation timing function (#5954)

src/number-keyboard/index.less

@@ -7,7 +7,6 @@
   z-index: @number-keyboard-z-index;
   width: 100%;
   background-color: @number-keyboard-background-color;
-  animation-timing-function: ease-out;
   user-select: none;
 
   &__title {

src/popup/index.less

@@ -68,6 +68,20 @@
       padding-bottom: env(safe-area-inset-bottom);
     }
 
+    &-slide-top-enter-active,
+    &-slide-left-enter-active,
+    &-slide-right-enter-active,
+    &-slide-bottom-enter-active {
+      transition-timing-function: ease-out;
+    }
+
+    &-slide-top-leave-active,
+    &-slide-left-leave-active,
+    &-slide-right-leave-active,
+    &-slide-bottom-leave-active {
+      transition-timing-function: ease-in;
+    }
+
     &-slide-top-enter,
     &-slide-top-leave-active {
       transform: translate3d(0, -100%, 0);

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;