Vue.js转换错开不工作

Vue.js transition stagger not working

本文关键字：工作 js 转换 Vue      更新时间：2023-09-26

我试图获得v-for渲染的列表，以便在每个Vuejs文档中错开其构建。我正在使用stagger属性并发射Vue.nextTick标志，以便在ready触发器之后过渡到火灾。不确定我是否错过了什么。使用Vue 1.0.26。什么好主意吗?

演示:http://codepen.io/thelucre/pen/WGQaPd

文档:http://vuejs.org/guide/transitions.html Staggering-Transitions

交错转换只会在v-for指令的数据实际改变时触发，而不是在v-show或v-if的情况下。在我的例子中，我将使用一个计算属性来保存一个空数组，然后在nextTick()函数调用之后设置数据。

更新的演示:http://codepen.io/thelucre/pen/WGQaPd

答案来源:https://github.com/vuejs/vue/issues/3658#issuecomment-246256099

这是你想要的吗?

你的过渡属性被设置为fade。

<div v-if="show" v-for="item in items" transition="fade" stagger="1000" class="item">{{ item }}</div>

我将它改为交错样式，并从文档中的示例中复制CSS。

相关文章：