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

您可以将参数绑定到transition-group的特殊属性: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

找到there，但也是上面链接文档中提到的这个用例。

这是my example。

重启Vue转换

1 个答案: