fix: carousel rtl

xulingling0 · Mar 29, 2024 · 0f77ba8 · 0f77ba8
1 parent 27a5ed6
commit 0f77ba8
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 13 deletions.
diff --git a/components/Carousel/index.tsx b/components/Carousel/index.tsx
@@ -253,6 +253,24 @@ function Carousel(baseProps: CarouselProps, ref) {
       : null
   );
 
+  let [slideToPrev, slideToNext] = [
+    () =>
+      slideTo({
+        targetIndex: prevIndex,
+        isNegative: true,
+        isManual: true,
+      }),
+
+    () =>
+      slideTo({
+        targetIndex: nextIndex,
+        isManual: true,
+      }),
+  ];
+  if (rtl) {
+    [slideToPrev, slideToNext] = [slideToNext, slideToPrev];
+  }
+
   return (
     <ResizeObserver onResize={computeStyle}>
       <div
@@ -352,19 +370,8 @@ function Carousel(baseProps: CarouselProps, ref) {
             direction={direction}
             showArrow={showArrow}
             icons={icons}
-            prev={() =>
-              slideTo({
-                targetIndex: prevIndex,
-                isNegative: true,
-                isManual: true,
-              })
-            }
-            next={() =>
-              slideTo({
-                targetIndex: nextIndex,
-                isManual: true,
-              })
-            }
+            prev={slideToPrev}
+            next={slideToNext}
           />
         )}
       </div>

diff --git a/components/Carousel/style/index.less b/components/Carousel/style/index.less
@@ -79,13 +79,24 @@
         opacity: 0;
         transform: translateX(-50%) translateZ(-400px);
         animation: ~'@{prefix}-carousel-card-middle-to-bottom';
+
+        .@{carousel-prefix-cls}-rtl & {
+          left: unset;
+          right: 50%;
+          animation: ~'@{prefix}-carousel-card-middle-to-bottom-rtl';
+        }
       }
 
       // prev 右边对齐容器中线
       .@{carousel-prefix-cls}-item-prev {
         opacity: 0.4;
         transform: translateX(-100%) translateZ(-200px);
         animation: ~'@{prefix}-carousel-card-top-to-middle';
+
+        .@{carousel-prefix-cls}-rtl & {
+          transform: translateX(100%) translateZ(-200px);
+          animation: ~'@{prefix}-carousel-card-top-to-middle-rtl';
+        }
       }
 
       // next 左边对齐容器中线
@@ -100,6 +111,11 @@
         opacity: 1;
         transform: translateX(-50%) translateZ(0);
         animation: ~'@{prefix}-carousel-card-middle-to-top';
+
+        .@{carousel-prefix-cls}-rtl & {
+          transform: translateX(50%) translateZ(0);
+          animation: ~'@{prefix}-carousel-card-middle-to-top-rtl';
+        }
       }
 
       &.@{carousel-prefix-cls}-negative {
@@ -110,16 +126,28 @@
         // prev 右边对齐容器中线
         .@{carousel-prefix-cls}-item-prev {
           animation: ~'@{prefix}-carousel-card-bottom-to-middle-reverse';
+
+          .@{carousel-prefix-cls}-rtl & {
+            animation: ~'@{prefix}-carousel-card-bottom-to-middle-reverse-rtl';
+          }
         }
 
         // next 左边对齐容器中线
         .@{carousel-prefix-cls}-item-next {
           animation: ~'@{prefix}-carousel-card-top-to-middle-reverse';
+
+          .@{carousel-prefix-cls}-rtl & {
+            animation: ~'@{prefix}-carousel-card-top-to-middle-reverse-rtl';
+          }
         }
 
         // current 居中
         .@{carousel-prefix-cls}-item-current {
           animation: ~'@{prefix}-carousel-card-middle-to-top-reverse';
+
+          .@{carousel-prefix-cls}-rtl & {
+            animation: ~'@{prefix}-carousel-card-middle-to-top-reverse-rtl';
+          }
         }
       }
     }
@@ -460,6 +488,10 @@
     }
   }
 
+  &-rtl {
+    direction: rtl;
+  }
+
   &-rtl &-indicator-dot &-indicator-item:not(:last-child) {
     margin-left: @carousel-indicator-gap;
     margin-right: 0;

diff --git a/components/Carousel/style/slide.less b/components/Carousel/style/slide.less
@@ -104,6 +104,18 @@
   }
 }
 
+@keyframes ~'@{prefix}-carousel-card-middle-to-bottom-rtl' {
+  from {
+    opacity: 0.4;
+    transform: translateX(100%) translateZ(-200px);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%) translateZ(-400px);
+  }
+}
+
 @keyframes ~'@{prefix}-carousel-card-top-to-middle' {
   from {
     opacity: 1;
@@ -116,6 +128,18 @@
   }
 }
 
+@keyframes ~'@{prefix}-carousel-card-top-to-middle-rtl' {
+  from {
+    opacity: 1;
+    transform: translateX(50%) translateZ(0);
+  }
+
+  to {
+    opacity: 0.4;
+    transform: translateX(100%) translateZ(-200px);
+  }
+}
+
 @keyframes ~'@{prefix}-carousel-card-middle-to-top' {
   from {
     opacity: 0.4;
@@ -128,6 +152,18 @@
   }
 }
 
+@keyframes ~'@{prefix}-carousel-card-middle-to-top-rtl' {
+  from {
+    opacity: 0.4;
+    transform: translateX(0) translateZ(-200px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(50%) translateZ(0);
+  }
+}
+
 @keyframes ~'@{prefix}-carousel-card-bottom-to-middle-reverse' {
   from {
     opacity: 0;
@@ -140,6 +176,18 @@
   }
 }
 
+@keyframes ~'@{prefix}-carousel-card-bottom-to-middle-reverse-rtl' {
+  from {
+    opacity: 0;
+    transform: translateX(100%) translateZ(-400px);
+  }
+
+  to {
+    opacity: 0.4;
+    transform: translateX(100%) translateZ(-200px);
+  }
+}
+
 @keyframes ~'@{prefix}-carousel-card-middle-to-bottom-reverse' {
   from {
     opacity: 0.4;
@@ -164,6 +212,18 @@
   }
 }
 
+@keyframes ~'@{prefix}-carousel-card-top-to-middle-reverse-rtl' {
+  from {
+    opacity: 1;
+    transform: translateX(50%) translateZ(0);
+  }
+
+  to {
+    opacity: 0.4;
+    transform: translateX(0%) translateZ(-200px);
+  }
+}
+
 @keyframes ~'@{prefix}-carousel-card-middle-to-top-reverse' {
   from {
     opacity: 0.4;
@@ -176,6 +236,18 @@
   }
 }
 
+@keyframes ~'@{prefix}-carousel-card-middle-to-top-reverse-rtl' {
+  from {
+    opacity: 0.4;
+    transform: translateX(100%) translateZ(-200px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(50%) translateZ(0);
+  }
+}
+
 @keyframes ~'@{prefix}-carousel-card-right-to-middle' {
   from {
     opacity: 0;