带有 Flex/网格包装器的 Vue 过渡组项移动到左上角

Question

>我有这个：

<transition-group
name="product-list"
tag="section"
class="product-list"
@before-leave="beforeLeave"
>
<product
v-for="watch in watches"
:key="watch.id"
:item="watch"
>
</product>
</transition-group>

正如文档中所说：

.product-list-enter-active,
.product-list-leave-active {
transition: all 0.3s;
}
.product-list-enter,
.product-list-leave-to {
opacity: 0;
transform: scale(0.5);
}
.product-list-leave-active {
position: absolute;
}

问题：当任何元素离开(它从列表中删除(时，由于位置绝对，它位于左上角......这有点打破了它的美学

Answer 1

找到这个解决方案：

<transition-group
@before-leave="beforeLeave">
...
</transition>

methods: {
beforeLeave(el) {
const {marginLeft, marginTop, width, height} = window.getComputedStyle(el)
el.style.left = `${el.offsetLeft - parseFloat(marginLeft, 10)}px`
el.style.top = `${el.offsetTop - parseFloat(marginTop, 10)}px`
el.style.width = width
el.style.height = height
}
}

感谢 forum.vuejs.org 的DocMarss

如果有更好的解决方案，请告诉我