vue элемент переходной группы с оболочкой flex / grid перемещается в верхний левый угол - PullRequest
Новая
       20

vue элемент переходной группы с оболочкой flex / grid перемещается в верхний левый угол

0 голосов
/ 08 января 2020

У меня есть это: 

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

Проблема : когда какой-либо элемент уходит (он удаляется из списка) он идет в верхнем левом углу из-за абсолютной позиции ... которая как бы нарушает его эстетику

1 Ответ

0 голосов
/ 08 января 2020

Найдены следующие решения: 

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

благодаря docmars на форуме. vuejs .org

Если есть лучше решение там, пожалуйста, дайте мне знать

...