From 1ea66bdfe413c4c03dc4dce33858f156911fc403 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Thu, 10 Aug 2017 16:40:46 +0800
Subject: [PATCH] Carousel: fix flashing items

---
 packages/carousel/src/item.vue               | 11 ++++++++---
 packages/carousel/src/main.vue               |  6 +++---
 packages/theme-default/src/carousel-item.css |  7 ++++++-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/carousel/src/item.vue b/packages/carousel/src/item.vue
index 76a0d3ee4..8bfe520f1 100644
--- a/packages/carousel/src/item.vue
+++ b/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);
         }
diff --git a/packages/carousel/src/main.vue b/packages/carousel/src/main.vue
index 9ce59da6a..253f84de3 100644
--- a/packages/carousel/src/main.vue
+++ b/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);
       });
     },
 
diff --git a/packages/theme-default/src/carousel-item.css b/packages/theme-default/src/carousel-item.css
index 2bf1e2307..eccc48261 100644
--- a/packages/theme-default/src/carousel-item.css
+++ b/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);