I recently started to work with Vue.js, I'm trying to make something super simple tho on vue everything seems super complicated when doing simple things, especially when you don't have 5 years of vue behind you.
So basically, Imagine I have this component:
<template>
<section class="stuff">
<div class="hello pop1">div content</div>
<ul>
<li class="hello pop2"> stuff </li>
...
</ul>
</section>
</template>
I want to loop trough all childs of stuff so I can add remove one of their class with a timeout between each iteration.
I used to do it like that with jQuery:
$(".stuff").find("*").each(function(i){
setTimeout ( function(){
$("stuff").find(".pop" + i ).removeClass("hello");
},i * 100);
});
(This is an example so the fact that I manually typed is normal)
What's the easiest way to reproduce that in Vue?
Thanks.
If you're attempting a staggered animation by removing classes, you might find Vue's TransitionGroup helpful! Here's a general example:
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 (fancy-dancy slide-in animation)
.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 });
}
});