我正在尝试让 vue 转换组交错按照示例工作:https://v2.vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions
具体来说，我没有看到加载时发生转换。在我的代码笔(如下)中，添加按钮可以工作，并且添加到列表中的新项目会发生淡入淡出，但同样不会加载。
https://codepen.io/robomatic/pen/RgLzJP
new Vue({
el: "#app",
data() {
return {
adding: false,
page: {
mediaGallery: [{
sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"},
fields: {file: {url: "//via.placeholder.com/800x600g"}}
},{
sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"},
fields: {file: {url: "//via.placeholder.com/800x600g"}}
},{
sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"},
fields: {file: {url: "//via.placeholder.com/800x600g"}}
},{
sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"},
fields: {file: {url: "//via.placeholder.com/800x600g"}}
},{
sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"},
fields: {file: {url: "//via.placeholder.com/800x600g"}}
},{
sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"},
fields: {file: {url: "//via.placeholder.com/800x600g"}}
}]
}
};
},
methods: {
delayedBy: function(el) {
if (this.adding)
return 0
return 350
},
beforeEnter: function(el) {
console.log("beforeEnter");
el.style.opacity = 0;
},
enter: function(el, done) {
console.log("enter");
let delay = el.dataset.index * this.delayedBy();
setTimeout(function() {
$(el).animate({ opacity: 1 }, 300, done);
}, delay);
},
leave: function(el, done) {
console.log("leave");
let delay = el.dataset.index * this.delayedBy();
setTimeout(function() {
$(el).animate({ opacity: 0 }, 300, done);
}, delay);
},
addItem() {
let item = {
sys: {id: Math.random().toString().substring(2)},
fields: {file: {url: "//via.placeholder.com/800x600"}}
}
this.adding = true;
this.page.mediaGallery.push(item)
}
}
});
最佳答案
添加appear归因于您的<transition-group>对于 transitions on initial render
<transition-group appear></transition-group>
这是codepen负载下的工作转换
关于jquery - 过渡组交错不起作用(Vue 2)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44767494/