github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Carousel: fix flashing items

pull/6571/head
Leopoldthecoder 2017-08-10 16:40:46 +08:00 committed by 杨奕
parent c63de83beb
commit 1ea66bdfe4
3 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/carousel/src/item.vue
View File

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

6
packages/carousel/src/main.vue
View File

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

7
packages/theme-default/src/carousel-item.css
View File

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