javascript - 重启 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 钩子(Hook)。

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

您可以将参数绑定(bind)到特殊属性:key对于 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

---

找到 there ，还有上面链接在文档中提到的这个用例。

这里是 my example .