Как добавить анимацию скольжения к элементам, порядок которых изменен с помощью `element.insertBefore(...)` ⇐ CSS

[Anonymous]

Мне нужно применить анимацию скольжения к элементам .draggable ниже всякий раз, когда происходит изменение порядка. Изменения видны сразу после изменения порядка, хочу добавить задержку.

Код: Выделить всё

function listItemDragged(e) {
e.target.classList.add("dragging");
let dropTarget =
document.elementFromPoint(e.clientX, e.clientY) === null
? e.target
: document.elementFromPoint(e.clientX, e.clientY);

if (e.target.parentNode === dropTarget.parentNode) {
dropTarget =
dropTarget !== e.target.nextSibling ? dropTarget : dropTarget.nextSibling;
e.target.parentNode.insertBefore(e.target, dropTarget);
}
}

function listItemDropped(e) {
e.target.classList.remove("dragging");
e.preventDefault();
}

function onLoad() {
let listItems = document.querySelectorAll(".draggable");
Array.prototype.map.call(listItems, (option) => {
option.ondrag = listItemDragged;
option.ondragend = listItemDropped;
});
document.querySelector('.sortable-list').addEventListener("dragover", (e) => e.preventDefault());
}

onLoad();

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif
}

body {
background-color: #2b3035;
}

.draggable {
display: flex;
margin-top: 10px;
padding: 10px 12px;
border-radius: 5px;
border: 1px solid #5c636a;
margin-right: 5px;
background-color: #212529;
cursor: grab;
color: #ffffff;
touch-action: none
}

.dragging {
cursor: grabbing;
background: transparent;
color: transparent;
border: none;
}

Код: Выделить всё

[*]

[list]

Lorem ipsum dolor sit amet 1

[*]
Lorem ipsum dolor sit amet 2

[*]
Lorem ipsum dolor sit amet 3

[*]
Lorem ipsum dolor sit amet 4

[/list]

Желаемый эффект похож на показанный ниже.


Я попробовал несколько предложений отсюда, вопрос был задан 10 лет назад, поэтому некоторые ответы больше не работают или работают, но дают разные результаты. эффект, чем тот, который показан выше. @dalelandry предложил мне использовать sortable.js, хотя это может дать более или менее желаемый эффект, интеграция с другими фреймворками, кроме node.js, может быть немного громоздкой и может не подходить для моего случая.< /п>

Подробнее здесь: https://stackoverflow.com/questions/759 ... sertbefore