Vue.js转换错开不起作用

时间:2016-09-11 17:49:25

标签: javascript css3 transition vue.js

我试图获取一个使用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

2 个答案:

答案 0 :(得分:1)

交错过渡只会在v-for指令的数据实际发生变化时触发,而不是v-showv-if。在我的情况下,我将使用一个包含空数组的计算属性,然后在nextTick()函数调用之后设置数据。

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

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

答案 1 :(得分:-1)

this你追求的是什么?

您的过渡属性设置为淡入淡出。

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

我将其更改为交错并从文档中的示例中复制了CSS。