javascript - Vue.js 过渡交错不起作用

标签 javascript css 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

最佳答案

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

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

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

关于javascript - Vue.js 过渡交错不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39438969/

相关文章:

javascript - React-native:设置 HTML 源时,Webview 的 Flexbox 样式不起作用

javascript - 滚动到页面底部时jQuery加载内容

iphone - 如何实现具有翻转和缩放功能的iPhone View 过渡动画?

html - CSS 过渡白色闪光

android - 如何在动画期间摆脱这个黑条?

javascript - HTML 打印限制仅 1 页

javascript - Github 分享小工具

css - 为什么我的 Twitter Bootstrap 导航栏一直在移动?

javascript - 在使用 Node 提取 zip 文件时将流式数据连接到单个文件或字符串中

javascript - react native : How to make a component do an action on press