fix: add topLeft and topRight animation (react-component#822)

xulingling0 · Oct 27, 2022 · 53413e1 · 53413e1
1 parent 34903a8
commit 53413e1
Showing 1 changed file with 33 additions and 2 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -315,12 +315,15 @@
   }
 
   &-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
-  &-slide-up-appear&-slide-up-appear-active&-placement-topLeft {
+  &-slide-up-appear&-slide-up-appear-active&-placement-topLeft,
+  &-slide-up-enter&-slide-up-enter-active&-placement-topRight,
+  &-slide-up-appear&-slide-up-appear-active&-placement-topRight {
     animation-name: rcSelectDropdownSlideDownIn;
     animation-play-state: running;
   }
 
-  &-slide-up-leave&-slide-up-leave-active&-placement-topLeft {
+  &-slide-up-leave&-slide-up-leave-active&-placement-topLeft,
+  &-slide-up-leave&-slide-up-leave-active&-placement-topRight {
     animation-name: rcSelectDropdownSlideDownOut;
     animation-play-state: running;
   }
@@ -351,6 +354,34 @@
   }
 }
 
+@keyframes rcSelectDropdownSlideDownIn {
+  0% {
+    transform: scaleY(0);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes rcSelectDropdownSlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+
 @keyframes rcSelectLoadingIcon {
   0% {
     transform: rotate(0);