Carousel: fix flashing items

packages/carousel/src/item.vue

@@ -6,7 +6,8 @@
       'is-active': active,
       'el-carousel__item--card': $parent.type === 'card',
       'is-in-stage': inStage,
-      'is-hover': hover
+      'is-hover': hover,
+      'is-animating': animating
     }"
     @click="handleItemClick"
     :style="{
@@ -43,7 +44,8 @@
         scale: 1,
         active: false,
         ready: false,
-        inStage: false
+        inStage: false,
+        animating: false
       };
     },
 
@@ -71,9 +73,12 @@
         }
       },
 
-      translateItem(index, activeIndex) {
+      translateItem(index, activeIndex, oldIndex) {
         const parentWidth = this.$parent.$el.offsetWidth;
         const length = this.$parent.items.length;
+        if (this.$parent.type !== 'card' && oldIndex !== undefined) {
+          this.animating = index === activeIndex || index === oldIndex;
+        }
         if (index !== activeIndex && length > 2) {
           index = this.processIndex(index, activeIndex, length);
         }

packages/carousel/src/main.vue

@@ -106,7 +106,7 @@ export default {
     },
 
     activeIndex(val, oldVal) {
-      this.resetItemPosition();
+      this.resetItemPosition(oldVal);
       this.$emit('change', val, oldVal);
     },
 
@@ -156,9 +156,9 @@ export default {
       this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
     },
 
-    resetItemPosition() {
+    resetItemPosition(oldIndex) {
       this.items.forEach((item, index) => {
-        item.translateItem(index, this.activeIndex);
+        item.translateItem(index, this.activeIndex, oldIndex);
       });
     },
 

packages/theme-default/src/carousel-item.css

@@ -11,15 +11,20 @@
       width: 100%;
       height: 100%;
       display: inline-block;
-      transition: .4s ease-in-out;
       overflow: hidden;
       z-index: calc(var(--index-normal) - 1);
+
       @when active {
         z-index: calc(var(--index-normal) + 1);
       }
 
+      @when animating {
+        transition: transform .4s ease-in-out;
+      }
+
       @modifier card {
         width: 50%;
+        transition: transform .4s ease-in-out;
         &.is-in-stage {
           cursor: pointer;
           z-index: var(--index-normal);