Vue.js 过渡交错不起作用答案

【问题标题】：Vue.js transition stagger not workingVue.js 过渡交错不起作用
【发布时间】：2016-09-11 17:49:25
【问题描述】：

我正在尝试获取使用 v-for 呈现的列表，以根据 Vuejs 文档错开其构建。我正在使用stagger 属性并触发Vue.nextTick 标志以在ready 触发后立即触发转换。不确定我是否遗漏了什么。使用 Vue 1.0.26。有任何想法吗？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

this 是你的目标吗？

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

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

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

【讨论】：