使用vue transition-groups,是否有一种方法可以触发请假+输入转换,而不是移动元素的移动转换?
它应该离开,然后进入新位置。移动过渡似乎仅适用于转换。
游乐场:https://codepen.io/anon/pen/WqJEmV
HTML:
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
</div>
JS:
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
CSS:
/** Should NOT use this: **/
.flip-list-move {
transition: transform 1s;
}
/** Should use this instead: **/
.flip-list-enter-active, .flip-list-leave-active {
transition: all 1s;
}
.flip-list-enter {
opacity: 0;
transform: translateX(80px);
}
.flip-list-leave-to {
opacity: 0;
transform: translateY(30px);
}
答案 0 :(得分:1)
我遇到了类似的问题,所以我以为我会在这里发布给以后找到它的其他人:
对我有用的解决方案是利用key
属性来强制vue将移动的项目视为“新”项目。这样,enter/leave动画将被触发,而不是move。
我分叉了您的笔以显示其工作方式:https://codepen.io/josh7weaver/pen/eYOXxed?editors=1010
如您所见,这种方法的缺点是您必须增加数据模型的复杂性才能正常工作。也就是说,在您拥有一个简单数组之前,在我们拥有一个对象数组之后,因为每个对象都需要负责自己的键。
您可以通过多种不同的方式为要欺骗的商品生成唯一的ID,这是“新的”,但是我刚刚使用的方法是从公共要点复制并粘贴的。
希望有帮助!
答案 1 :(得分:0)
据我所知:
如果您只想触发回车退出转换,则必须从数组中添加/删除项目,而不是随机播放。
这里是一个例子:
shuffle: function () {
this.items = [1,3,5,7,9];
}