Vue.js 转换交错不起作用
Vue.js transition stagger not working
我正在尝试获取使用 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
this是你想要的吗？
您的过渡属性设置为淡入淡出。
<div v-if="show" v-for="item in items" transition="fade" stagger="1000" class="item">{{ item }}</div>
我将其更改为交错并从文档中的示例中复制了 CSS。
只有当 v-for 指令的数据实际发生变化时才会触发交错转换，而不是 v-show 或 v-if 的情况。那么在我的例子中，我将使用一个计算的 属性 来保存一个空数组，然后在 nextTick() 函数调用之后设置数据。
已更新演示：http://codepen.io/thelucre/pen/WGQaPd
答案来源：https://github.com/vuejs/vue/issues/3658#issuecomment-246256099
我正在尝试获取使用 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
this是你想要的吗？
您的过渡属性设置为淡入淡出。
<div v-if="show" v-for="item in items" transition="fade" stagger="1000" class="item">{{ item }}</div>
我将其更改为交错并从文档中的示例中复制了 CSS。
只有当 v-for 指令的数据实际发生变化时才会触发交错转换，而不是 v-show 或 v-if 的情况。那么在我的例子中，我将使用一个计算的 属性 来保存一个空数组，然后在 nextTick() 函数调用之后设置数据。
已更新演示：http://codepen.io/thelucre/pen/WGQaPd
答案来源：https://github.com/vuejs/vue/issues/3658#issuecomment-246256099