Причина, по которой вы не видите никаких translate с (или matrix с) преобразований в первоначальном примере, заключается в том, что преобразования выполняются в директиве <transition-group>.
Без этой директивы изменение было бы мгновенным. Элементы будут прыгать на свои новые позиции.
<transition-group> делает:
- вычисляет положение элементов после прыжка
- применяет преобразования к элементам до тех пор, пока они не окажутся в правильном положении без изменения их порядка в DOM
- после выполнения преобразования a) удаляет все классы переходов и преобразования и b) выполняет операции DOM. Поскольку это делается внутри одного кадра анимации, вы не можете видеть переключатель.
Это переход от преобразованных элементов к переупорядоченным элементам. Поскольку они находятся в одинаковых местах, «прыжок» не виден.
Чтобы разрешить управление анимацией, <transition-group> применяет классы перехода к каждому элементу перехода.
В исходном примере
.cell-move {
transition: transform 1s;
}
управляет анимацией, потому что:
-
name из transform-group равно cell.
- тип изменения
move (преобразованные дочерние элементы перемещают свою позицию в родительском).
Чтобы лучше представить, что происходит, посмотрите их индексы .
Итак, чтобы повторить тот же эффект, вам необходимо:
- вычисление новых позиций (удобный способ - создать родительский клон и сделать его невидимым, с элементами в правильном порядке)
- сравнить старые позиции элементов с новыми позициями (используйте
getBoundingClientRect на каждой) и использовать их для перевода исходных элементов в клонированные позиции
- после завершения анимации удалите все переходы и преобразования из оригиналов и выполните изменения DOM (обратите внимание, что у вас возникнет соблазн просто заменить оригиналы на клоны, поскольку технически они уже находятся в правильном порядке - но вы действительно не хотите этого делать - вы потеряете все события, связанные с оригиналами!)
- удалить клона
Важное примечание: вам не нужно фактически вставлять клон в DOM для вычисления новых позиций, но это делает вещи проще, особенно если вы не понимаете всего, что происходит за сцены.
Важной частью является то, что клон не вызывает перерисовку в слоях Layout и Paint вашего документа. В основном он должен иметь position:absolute на протяжении всего жизненного цикла.
Даже если у вашего вопроса другой вкус (т. Е. «Как Vue это делает?» ), технически ваш вопрос уже задавался и на него давали ответ. Например, быстрый поиск по моим ответам с помощью clone и / или transition, скорее всего, даст похожие ответы. Вот похожий .