perf(carousel): optimize flashing when sliding

ZhongAnTech · May 31, 2021 · 77b960e · 77b960e
1 parent b554cdf
commit 77b960e
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/packages/zarm/src/carousel/__tests__/__snapshots__/index.test.jsx.snap b/packages/zarm/src/carousel/__tests__/__snapshots__/index.test.jsx.snap
@@ -269,7 +269,7 @@ exports[`Carousel style render correctly 1`] = `
 exports[`Carousel swipeable 1`] = `
 <Carousel
   activeIndex={0}
-  animationDuration={300}
+  animationDuration={500}
   autoPlay={false}
   autoPlayIntervalTime={3000}
   direction="left"

diff --git a/packages/zarm/src/carousel/demo.md b/packages/zarm/src/carousel/demo.md
@@ -176,7 +176,7 @@ ReactDOM.render(
 | autoPlayIntervalTime | number                         | 3000   | 自动轮播时间间隔，单位：毫秒                   |
 | moveDistanceRatio    | number                         | 0.5    | 移动距离比例临界点                             |
 | moveTimeSpan         | number                         | 300    | 移动时间跨度临界点，单位：毫秒                 |
-| animationDuration    | number                         | 300    | 动画执行时间，单位：毫秒                       |
+| animationDuration    | number                         | 500    | 动画执行时间，单位：毫秒                       |
 | showPagination       | boolean                        | true   | 是否显示分页器                                 |
 | onChange             | (activeIndex?: number) => void | -      | 值变化时触发的回调函数                         |
 | onChangeEnd          | (activeIndex?: number) => void | -      | 值变化动画结束后触发的回调函数                 |
diff --git a/packages/zarm/src/carousel/index.tsx b/packages/zarm/src/carousel/index.tsx
@@ -16,7 +16,7 @@ export default class Carousel extends Component<CarouselProps, any> {
     height: 160,
     loop: false,
     activeIndex: 0,
-    animationDuration: 300,
+    animationDuration: 500,
     swipeable: true,
     autoPlay: false,
     autoPlayIntervalTime: 3000,

diff --git a/packages/zarm/src/carousel/style/component.scss b/packages/zarm/src/carousel/style/component.scss
@@ -2,11 +2,19 @@
   position: relative;
   overflow: hidden;
 
+  @include e(items) {
+    display: flex;
+    transform-style: preserve-3d;
+    transition-property: transform;
+  }
+
   @include e(item) {
-    display: inline-block;
+    flex-shrink: 0;
+    position: relative;
     width: 100%;
     height: 100%;
     vertical-align: top;
+    transition-property: transform;
   }
 
   @include e(pagination) {
@@ -25,7 +33,6 @@
 
   @include m(horizontal) {
     @include e(items) {
-      will-change: transform;
       white-space: nowrap;
     }
 
@@ -47,6 +54,10 @@
   }
 
   @include m(vertical) {
+    @include e(items) {
+      flex-direction: column;
+    }
+
     @include e(pagination) {
       top: 50%;
       right: var(--carousel-pagination-distance);

diff --git a/packages/zarm/src/image-preview/__tests__/__snapshots__/index.test.tsx.snap b/packages/zarm/src/image-preview/__tests__/__snapshots__/index.test.tsx.snap
@@ -198,7 +198,7 @@ exports[`ImagePreview snapshot renders correctly 1`] = `
                   >
                     <Carousel
                       activeIndex={0}
-                      animationDuration={300}
+                      animationDuration={500}
                       autoPlay={false}
                       autoPlayIntervalTime={3000}
                       direction="left"
@@ -536,7 +536,7 @@ exports[`ImagePreview snapshot renders correctly with origin 1`] = `
                   >
                     <Carousel
                       activeIndex={0}
-                      animationDuration={300}
+                      animationDuration={500}
                       autoPlay={false}
                       autoPlayIntervalTime={3000}
                       direction="left"