CSS绝对和相对不工作，我的div滑动条轮询器

Question

我正在尝试使用VUE制作滑块轮播，css类(3div)正在for循环中运行。当div淡出时，下一个滑块会在底部创建一个双滑块，这意味着两个滑块同时运行。

问题示例

每当我使用相对和绝对属性时，div就会完全消失。我不知道该怎么办

<template>
<h1 class="text-center">SLIDER APP</h1>
<div>
<div v-for="(color, index) in slider" :key="color">
<transition name="fade">
<div v-if="currentslide == index" :class="color"></div>
</transition>
</div>
</div>

</template>
<script>
export default {
data(){
return {
currentslide:0,
intervals:'',
slider:['first-slider', 'second-slider', 'third-slider'],
isshowing:true,
}
},
mounted(){
this.intervals = setInterval(() => {
console.log('This is slide', this.currentslide)
this.currentslide = this.currentslide == 2 ? 0:this.currentslide+1;
}, 2000);
},
beforeUnmount(){
clearInterval(this.intervals)
}
}
</script>
<style>
.first-slider {
background: blue;
height: 350px;
}
.second-slider {
background: red;
height: 350px;
}
.third-slider {
background: orange;
height: 350px;
}
.fade-enter-active, .fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>

Answer 1

停止使用绝对或相对定位。相反，在外部div上使用display flex可以获得更好的定位效果。