I've been trying to mock a carousel-like effect in cards rendered through v-for. I have an array of data and I have a method that left rotates that array. I'm passing that rotated array in v-for. But, the rotated arrays shift the real dom div instead of re-rendering the component in v-for (I think this is how Vue behaves for optimization). I've tried transition-group but it only applies transition to leaving and entering div. Is there any way so that I can get a carousel-like effect (divs moving upward) using Vue transition? When I was writing the code, the divs were moving upward and behaving as expected because at that time instead of divs shifting in real dom, only the data inside that div were changing but later on it started to behave like this (divs shifting in real dom)
Here is the fiddle link: https://jsfiddle.net/aanish/7pe5jq9u/4/
Please help me to achieve the expected behavior.
var Box = {
props: ['achievement'],
template: '<transition name="slide-up"><div class="box" :key="achievement">{{achievement}}</div></transition>',
};
new Vue({
el: '#app',
data: {
achievements: ['Title1', 'Title2', 'Title3', 'Title4']
},
created() {
this.autoRotateArr();
},
components: {
'box': Box
},
methods: {
leftRotateArr() {
this.achievements.push(
this.achievements.shift()
)},
autoRotateArr() {
this.interval = setInterval(() => this.leftRotateArr(), 3000);
}
}
}).box-wrapper {
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 50px;
}
.box {
height: 50px;
background-color: orange;
margin: 10px 0;
}
.slide-up-enter-active {
transition: all 666ms cubic-bezier(0, 0, 1, 1);
}
.slide-up-enter {
transform: translateY(50px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="hero">
<box :achievement="achievements[0]"></box>
</div>
<div class="box-wrapper">
<div><button @click="leftRotateArr">Up</button></div>
<box v-for="achievement in achievements" :achievement="achievement" :key="achievement"></box>
</div>
</div>.
From the help of Michal Levý comment above, I get the expected behavior using transition-group