Vue.js:过渡组动画不起作用
Vue.js: transition-group animation doesn't work
我有一个滑块写成过渡组组件:
<template>
<div class="carousel-view">
<transition-group name="carousel-transition" class="carousel" tag="div">
<div v-for="(slide, index) in slides"
:key="index"
class="slide">
<div>{{ slide.status }}</div>
<img :src="slide.img" />
</div>
</transition-group>
<div class="carousel-control">
<button @click="goToPrevious" class="button button__main">Back</button>
<button @click="goToNext" class="button button__main">Next</button>
</div>
</div>
</template>
在我的 <style>
我有这个:
<style lang="scss" scoped>
.carousel {
overflow: hidden;
display: inline;
height: 100%;
width: 900px;
min-width: 200px;
text-align: center;
}
.slide {
display: inline-block;
position: relative;
z-index: 10;
}
.slide:first-of-type, .slide:last-of-type {
opacity: 0.5;
position: absolute;
}
.slide:first-of-type {
right: 50%;
z-index: 5;
}
.slide:first-of-type {
right: 50%;
z-index: 5;
}
.slide:last-of-type {
left: 50%;
z-index: 5;
}
.carousel-transition-move {
transition: transform 1s;
}
</style>
我的方法中有两个函数可以让我的幻灯片移动:
goToNext() {
const firstSlide = this.slides.shift();
this.slides = this.slides.concat(firstSlide);
},
goToPrevious() {
const lastSlide = this.slides.pop();
this.slides = [lastSlide].concat(this.slides);
},
我所有的幻灯片目前只是组件 data()
中的一个硬编码数组,其中包含三个包含图像和一些状态的对象。现在我无法为幻灯片制作动画,也不能在单击调用这些功能的按钮后,也不能设置间隔。我究竟做错了什么?
显然,问题是您使用的是 :key="index"
,而 vue
在控制台中为此提示。
[Vue tip]: Do not use v-for index as key on children, this is the same as not using keys.
因此我将 :key
更改为 slide.status
并且有效。
这是工作JsFiddle
希望对您有所帮助!
我有一个滑块写成过渡组组件:
<template>
<div class="carousel-view">
<transition-group name="carousel-transition" class="carousel" tag="div">
<div v-for="(slide, index) in slides"
:key="index"
class="slide">
<div>{{ slide.status }}</div>
<img :src="slide.img" />
</div>
</transition-group>
<div class="carousel-control">
<button @click="goToPrevious" class="button button__main">Back</button>
<button @click="goToNext" class="button button__main">Next</button>
</div>
</div>
</template>
在我的 <style>
我有这个:
<style lang="scss" scoped>
.carousel {
overflow: hidden;
display: inline;
height: 100%;
width: 900px;
min-width: 200px;
text-align: center;
}
.slide {
display: inline-block;
position: relative;
z-index: 10;
}
.slide:first-of-type, .slide:last-of-type {
opacity: 0.5;
position: absolute;
}
.slide:first-of-type {
right: 50%;
z-index: 5;
}
.slide:first-of-type {
right: 50%;
z-index: 5;
}
.slide:last-of-type {
left: 50%;
z-index: 5;
}
.carousel-transition-move {
transition: transform 1s;
}
</style>
我的方法中有两个函数可以让我的幻灯片移动:
goToNext() {
const firstSlide = this.slides.shift();
this.slides = this.slides.concat(firstSlide);
},
goToPrevious() {
const lastSlide = this.slides.pop();
this.slides = [lastSlide].concat(this.slides);
},
我所有的幻灯片目前只是组件 data()
中的一个硬编码数组,其中包含三个包含图像和一些状态的对象。现在我无法为幻灯片制作动画,也不能在单击调用这些功能的按钮后,也不能设置间隔。我究竟做错了什么?
显然,问题是您使用的是 :key="index"
,而 vue
在控制台中为此提示。
[Vue tip]: Do not use v-for index as key on children, this is the same as not using keys.
因此我将 :key
更改为 slide.status
并且有效。
这是工作JsFiddle
希望对您有所帮助!