Vuejs Loop trough all children and execute a function for each iteration

Question

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.

Answer 1

If you're attempting a staggered animation by removing classes, you might find Vue'sTransitionGroup 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 });
  }
});

Here's a codepen of all that .