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

by

0👍

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 });
  }
});

Here’s a codepen of all that.

Leave a comment