再起動Vueの遷移

Question

私はアニメーションを制御いくつかのJavascriptのフックを持っているの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">{{ i }}</span> 
</transition-group> 

の遷移グループを定義しました。

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

コンポーネントが最初にレンダリングされるとき、アニメーションはうまく再生されます。ただし、アニメーションをプログラムで起動して、再度実行することはできますか？

Answer 1

:keyにのパラメータをバインドし、パラメータの値が変更されるたびに再レンダリングが行われ、アニメーションが再び実行されます。

パラメータを定義します。

data(){ 
    return { 
     animationTrigger : false 
    } 
} 

マークアップ：その後、

<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"> 
     {{ i }} 
    </span> 

</transition-group> 

そして、このようanimationTrigger値を変更することで、アニメーションを実行します。見つかり

animationTrigger = !animationTrigger 

---

を0を使用するだけでなく、上のリンクのドキュメントに記載されているこのユースケースも使用します。

ここにはmy exampleです。