Vue.js manually trig an animation
HTML
<div id="app">
<transition-group
name="staggered-scale"
tag="div"
:css="false"
@before-enter="animationBeforeEnter"
@enter="animationEnter"
:key="animationTrigger"
appear>
<span
v-for="i in range"
:key="i"
:data-index="i"
>
{{ i }}
</span>
</transition-group>
<button @click="animationTrigger = !animationTrigger">run it again</button>
</div>
CSS
span { display: inline-block; transition: all 1s ease-in; }
JavaScript
window.app = new Vue({
el: '#app',
data(){
return {
range : [1,2,3,4,5],
animationTrigger : false
}
},
methods : {
animationBeforeEnter(el) {
console.log('before eneter', el)
el.style.transform = 'scale(0.1)';
},
animationEnter(el, done) {
const delay = el.dataset.index * 300;
console.log('on enter', el, delay)
setTimeout(() => {
el.style.transform = 'scale(1.0)';
done();
}, delay);
}
}
})