我试图创建一个购物车页面,其中的项目列表有不同的转换每一个采取的行动。
购物车页面有两个部分的项目,项目和保存的项目(想想像亚马逊购物车)
这是我想完成的事情的例证;
____购物车页面____
---项目
Item A
Item B
Item C
Item D
---保存的项目
Item E
Item F
Item G
Item H
期望的移除转换
Removal of C
--淡出C,向上滑动D
Removal of E
--淡出E,向上滑动F
Removal of H
--淡出H
希望从保存的项移动到项转换
Moving G to Items
--淡出g,向上滑动h,仅淡出items部分中移动的项g(意味着现有项不应该有任何转换)
我想你从物品到保存物品都有同样的想法。
cart.vue(两组项目都从同一组件加载)
<CartItem v-for="(item, index) in cartItems"
:key="'cartId-' + index"
:item="item" />
<CartItem v-for="(item, index) in tempItems"
:key="'tempId-' + index"
:item="item" />
卡蒂姆
<transition-group name="fade">
<div :key="'cart_item--' + item.id"
class="cart-container">
...... lot of stuff going on here... remove button is here somewhere too
</div>
</transition-group>
我有两个问题;
我还没有机会在vue.js中完成真正的淡出然后向上滑动过渡。
对于移动项转换,移动项淡出效果很好,但在移动项的位置,所有项都淡入,而不仅仅是移动项。(意思是,在我给出的例子中,a、b、c、d项也会消失)
我知道为什么会发生这种情况,很明显computed属性(tempitems和cartitems重新加载)会以任何方式改变这种情况吗?
