Vuejs2 带有flex/grid包装的vue转换组项移到左上角

我有这个：

<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>

问题：当任何元素离开时（从列表中删除）由于位置的绝对性，它会进入左上方。。。哪种方式打破了it的美学

找到了以下解决方案：

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

感谢forum.vuejs.org中的

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

<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
    }
}