He estado tratando de simular un efecto similar a un carrusel en las tarjetas renderizadas a través de v-for. Tengo una matriz de datos y tengo un método que gira a la izquierda esa matriz. Estoy pasando esa matriz rotada en v-for. Pero, las matrices rotadas cambian el real dom div en lugar de volver a renderizar el componente en v-for (creo que así es como se comporta Vue para la optimización). Probé el grupo de transición, pero solo aplica la transición para salir y entrar en div. ¿Hay alguna forma de que pueda obtener un efecto similar a un carrusel (divs moviéndose hacia arriba) usando la transición Vue? Cuando estaba escribiendo el código, los divs se movían hacia arriba y se comportaban como se esperaba porque en ese momento, en lugar de cambiar los divs en el dominio real, solo cambiaban los datos dentro de ese div, pero luego comenzó a comportarse así (divs cambiando en el dominio real). dom)
Aquí está el enlace del violín: https://jsfiddle.net/aanish/7pe5jq9u/4/
Por favor, ayúdame a lograr el comportamiento esperado.
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>.
Con la ayuda del comentario anterior de Michal Levý, obtengo el comportamiento esperado usando el grupo de transición