javascript - Restart Vue transition -

i have defined transition group in vue

<transition-group         name="staggered-scale"         tag="div"         :css="false"         @before-enter="animationbeforeenter"         @enter="animationenter"         appear>     <span v-for="i in range" :key="i" :data-index="i">{{ }}</span> </transition-group> 

i have javascript hooks control animation.

animationbeforeenter(el) {   el.style.transform = 'scale(0.1)'; }  animationenter(el, done) {   const delay = el.dataset.index * 30;   settimeout(() => {     el.style.transform = 'scale(1.0)';     done();   }, delay); } 

when component rendered, animation plays fine. however, can programmatically trigger animation run again?

you can bind parameter special attribute :key transition-group , each time parameter's value changes causes re-render , animation runs again.

define parameter:

data(){     return {         animationtrigger : false     } } 

markup:

<transition-group         name="staggered-scale"         tag="div"         :key="animationtrigger"         :css="false"         @before-enter="animationbeforeenter"         @enter="animationenter"         appear>      <span          v-for="i in range"          :key="i"         :data-index="i">         {{ }}     </span>  </transition-group> 

and run animation changing animationtrigger value this:

animationtrigger = !animationtrigger 

---

found there, use-case mentioned in documentation link above.

and here my example.