Recientemente comencé a trabajar con Vue.js, estoy tratando de hacer algo súper simple, aunque en vue todo parece súper complicado cuando se hacen cosas simples, especialmente cuando no tienes 5 años de vue detrás de ti.
Básicamente, imagina que tengo este componente:
<template> <section class="stuff"> <div class="hello pop1">div content</div> <ul> <li class="hello pop2"> stuff </li> ... </ul> </section> </template> Quiero recorrer todos los elementos stuff para poder agregar eliminar uno de su clase con un tiempo de espera entre cada iteración.
Solía hacerlo así con jQuery:
$(".stuff").find("*").each(function(i){ setTimeout ( function(){ $("stuff").find(".pop" + i ).removeClass("hello"); },i * 100); });(Este es un ejemplo, por lo que el hecho de que haya escrito manualmente es normal)
¿Cuál es la forma más fácil de reproducir eso en Vue?
Gracias.
Si está intentando una animación escalonada mediante la eliminación de clases, puede encontrar útil el grupo detransición de Vue. He aquí un ejemplo general:
HTML:
<div id="app"> <transition-group tag="ul" name="slide-in" :style="{ '--total': list.length }"> <li v-for="l,i in list" key="i" :style="{'--i': i}" v-if="showItems && i < 10">Item {{ l }}</li> </transition-group> </div>CSS (animación deslizante elegante y elegante)
.slide-in { &-move { transition: opacity .5s linear, transform .5s ease-in-out; } &-leave-active { transition: opacity .4s linear, transform .4s cubic-bezier(.5,0,.7,.4); //cubic-bezier(.7,0,.7,1); transition-delay: calc( 0.1s * (var(--total) - var(--i)) ); } &-enter-active { transition: opacity .5s linear, transform .5s cubic-bezier(.2,.5,.1,1); transition-delay: calc( 0.1s * var(--i) ); } &-enter, &-leave-to { opacity: 0; } &-enter { transform: translateX(-1em); } &-leave-to { transform: translateX(1em); } }JS
new Vue({ el: '#app', data() { return { showItems: false, list: [0,1,2,3,4,5,6,7,8,9], } }, mounted(){ this.$nextTick(()=>{ this.showItems=true }); } });