feat(Overlay): add animation style (#1875)

* feat(Overlay): add animation style

* fix: fix spelling errors

style/mobile/components/_index.less

@@ -30,7 +30,7 @@
 
 @import "./toast/_index.less";
 
-@import "./overlay/_index.less";
+// @import "./overlay/_index.less";
 
 @import "./tag/_index.less";
 

style/mobile/components/overlay/v2/_animate.less

@@ -0,0 +1,51 @@
+@import "../../../base.less";
+
+// Mobile React: CSSTransition
+
+.@{prefix}-overlay-fade-enter,
+.@{prefix}-overlay-fade-appear {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+
+.@{prefix}-overlay-fade-exit {
+  animation-fill-mode: both;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+
+.@{prefix}-overlay-fade-enter.@{prefix}-overlay-fade-enter-active,
+.@{prefix}-overlay-fade-enter.@{prefix}-overlay-fade-enter-active.@{prefix}-overlay-fade-enter-to,
+.@{prefix}-overlay-fade-appear.@{prefix}-overlay-fade-appear-active,
+.@{prefix}-overlay-fade-appear.@{prefix}-overlay-fade-appear-active.@{prefix}-overlay-fade-appear-to {
+  animation-name: tOverlayFadeIn;
+  animation-play-state: running;
+}
+
+.@{prefix}-overlay-fade-exit.@{prefix}-overlay-fade-exit-active,
+.@{prefix}-overlay-fade-leave-active.@{prefix}-overlay-fade-leave-to {
+  animation-name: tOverlayFadeOut;
+  animation-play-state: running;
+}
+
+@keyframes tOverlayFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes tOverlayFadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

style/mobile/components/overlay/v2/_index.less

@@ -2,16 +2,17 @@
 
 @import "./_var.less";
 
+@import "./_animate.less";
+
 .@{overlay} {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   bottom: 0;
   background-color: @overlay-bg-color;
-  transition: opacity @overlay-transition-duration ease;
-  opacity: 1;
 
+  // Mobile Vue: Transition
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -22,4 +23,8 @@
     transition-property: opacity;
     transition-timing-function: ease;
   }
+
+  &-overflow-hidden {
+    overflow: hidden;
+  }
 }

style/mobile/components/overlay/v2/_var.less

@@ -1,4 +1,3 @@
 @overlay: ~"@{prefix}-overlay";
 @overlay-zindex: var(--td-overlay-zindex, 1000);
 @overlay-bg-color: var(--td-overlay-bg-color, @text-color-secondary);
-@overlay-transition-duration: var(--td-overlay-transition-duration, 300ms);