В чем причина некорректной transition-анимации при смене позиций двух элементов массива на Vue?

Question

[AfterGen]

Например, есть кнопка, которая меняет местами пару элементов в массиве, живой пример здесь . Но transition срабатывает только на левом элементе. А требуется анимировать переходы обоих одновременно

<template>
    <div
        v-for="(item, index) in data"
        :key="item.id"
        class="block"
        :style="`left: ${80 * index}px; top: 0px`"
    >
        {{ item.id }}
    </div>

    <button @click="swap" style="position: absolute; top: 80px;">SWAP</button>
</template>

<script setup>
import { ref } from 'vue'

const data = ref([{ id: 0 }, { id: 1 }])

function swap() {
    ;[data.value[0], data.value[1]] = [data.value[1], data.value[0]]
}
</script>

<style>
.block {
    transition: left ease-out 1s;
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid black;
}
</style>

Answer 1

[Wispik]

У тебя блоки перерисовываются, поэтому у левого всегда left: 0 и анимации нет
Надо либо, добавить элементам параметр позиции:

const data = ref([{ id: 0, pos: 0 }, { id: 1, pos: 1 }])

задавать left относительно позиции:
:style="`left: ${80 * item.pos}px; top: 0px`"
ну и менять тогда так:

function swap() {
    data.value.forEach(el => {
        el.pos = el.pos === 1 ? 0 : 1
    })
}

Либо, лучше для этого лучше использовать transition-group

Comments

[Aetae]

Не совсем перерисовываются, Vue достаточно умный - они именно перемещаются, причём перемещаются не все(иначе вообще анимации бы не было), а только нужные.
Однако даже перемещения блока, увы, достаточно, чтоб считать стиль перемещённого элемента "изначальным" и не применять анимацию.

Аналогичное поведение вообще без Vue:

Тут надо либо менять style с задержкой, либо не тасовать блоки, либо использовать flex и order для перетасовки. Либо действительно использовать transition-group.

[AfterGen]

Спасибо. Правда, не могу понять, метод сортировки _.shuffle() из демки где определен? Или он встроенный?

[Aetae]

AfterGen, ...upd: shuffle метод из lodash.

[AfterGen]

Aetae, да, этот вопрос не по теме, из примера по ссылке в первом ответе. Просто захотелось заодно уточнить

[Aetae]

AfterGen, да, глянул, обновил коммент.)

[AfterGen]

Aetae, а, хорошо, ни разу не пользовался, поэтому растерялся...

[Aetae]

AfterGen, в жирных проектах lodash практически всегда подключён. По современным меркам он не идеален и местами избыточен, но всё равно удобен, привычен и незаменим(часто появляются всякие хипстерские альтернативы которые пытаются с этим поспорить, но пока никто не смог).

[Aetae]

AfterGen, кстати вспомнил один старый грязный хак, который позволяет решить проблему в чистом js:
Но для vue это не применимо, т.к. там смена стиля и перетасовка - единая операция и вклиниться "промеж" не получится(ну по крайней мере без чрезмерного переусложнения).

[AfterGen]

Aetae, хм, и анимировалось это довольно синхронно (по крайней мере на глаз), при том что этот лишний рендер по идее должен был вызвать некую задержку для block[0]

[Aetae]

AfterGen, не, лишний рендер - наносекунды, если страница сама по себе не люто перегружена до лагоа.