重新启动 Vue 过渡

Question

我在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>

我有一些控制动画的 Javascript 钩子。

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

您可以将参数绑定到:keya 的特殊属性transition-group，每次参数值更改都会导致重新渲染，动画将再次运行。

定义一个参数：

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

在那里找到了，而且在上面的链接的文档中也提到了这个用例。

这是我的例子。