[英]Restart Vue transition
我在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);
}
最初渲染组件时,动画播放得很好。 但是,我可以以编程方式触发动画再次运行吗?
您可以将参数绑定到特殊属性:key
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
在那里找到了,但也通过上面的链接在文档中提到了这个用例。
这是我的榜样 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.