Перемещение двух прямоугольников с переходом ⇐ CSS

[Гость]

Используя следующий код, я могу переместить два прямоугольника вместе с помощью перехода, но после перемещения двух прямоугольников вместе один из прямоугольников снова перемещается снизу вверх.

var прямоугольники = document.getElementsByClassName("rectangle"); for (var я = 0; я < прямоугольники.длина; я++) { вар прямоугольник = прямоугольники [я]; вар upButton = прямоугольник.getElementsByClassName("вверх")[0]; var downButton = прямоугольник.getElementsByClassName("вниз")[0]; upButton.addEventListener("click", function() { moveFile(this.parentNode, "вверх"); }); downButton.addEventListener("click", function() { moveFile(this.parentNode, "вниз"); }); } функция moveFile(currentRectangle, направление) { var siblingRectangle = направление === "вверх"? currentRectangle.previousElementSibling: currentRectangle.nextElementSibling; если (siblingRectangle) { currentRectangle.classList.add(direction === "вверх"? "перемещение вверх": "перемещение вниз"); siblingRectangle.classList.add(direction === "вверх"? "перемещение вниз": "перемещение вверх"); setTimeout(функция() { if (направление === "вверх") { currentRectangle.parentNode.insertBefore(currentRectangle, siblingRectangle); } еще { currentRectangle.parentNode.insertBefore(siblingRectangle, currentRectangle); } currentRectangle.classList.remove(direction === «вверх»? «перемещение вверх»: «перемещение вниз»); siblingRectangle.classList.remove(direction === "вверх"? "перемещение вниз": "перемещение вверх"); }, 1000); } .container { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; высота: 400 пикселей; } .прямоугольник { ширина: 150 пикселей; высота: 100 пикселей; цвет фона: #ccc; граница: сплошной RGB(255, 126, 126); поле: 10 пикселей; выравнивание текста: по центру; размер шрифта: 18 пикселей; положение: относительное; переход: преобразование 0,5 с, легкость входа и выхода; } .move-up { преобразование: TranslateY (-120 пикселей); } .move-down { трансформировать: TranslateY (120 пикселей); } .кнопка { ширина: 100 пикселей; высота: 30 пикселей; цвет фона: #ddd; граница: нет; поле: 5 пикселей; курсор: указатель; 1 Вверх Вниз 2 Вверх Вниз 3 Вверх Вниз

Вы можете протестировать приведенный выше код. Как вы увидите, после перемещения прямоугольников один из прямоугольников снова перемещается вверх. Как убрать это лишнее движение?