diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less
index 1b718ded6..f28d74215 100644
--- a/src/number-keyboard/index.less
+++ b/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 {
diff --git a/src/popup/index.less b/src/popup/index.less
index 0e03b1646..9a9234ab7 100644
--- a/src/popup/index.less
+++ b/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);
diff --git a/src/style/animation.less b/src/style/animation.less
index 007440f53..db2485f8c 100644
--- a/src/style/animation.less
+++ b/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;
   }
 }
diff --git a/src/style/var.less b/src/style/var.less
index f5306db84..3b907a5e5 100644
--- a/src/style/var.less
+++ b/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;