У меня есть функция JavaScript для перемещения различных дочерних элементов по родительскому элементу div, но я хочу добавить переход, чтобы элементы перемещались в новую позицию в элементе div, а не меняли позицию мгновенно.
Что касается переходов, то для меня они работали только с определенными свойствами, такими как top/bottom или height/ ширина. В данном случае я не определил никаких свойств, поэтому мне интересно, возможен ли эффект перехода.
Здесь вы можете увидеть дочерние и родительские элементы, которые я настроил, а также мою функцию для перемещения дочерних элементов:
function moveElement(elementId, Place) { пусть div = document.getElementById('родительский') пусть элемент = document.getElementById(String(elementId)) пусть referencenode = div.children[место] div.insertBefore(элемент, ссылочный узел) } вар дети = document.getElementById('родитель').детей; document.addEventListener("клик", функция(событие) { пусть id = Children.item(2).id; перемещениеЭлемент (идентификатор, 0) }); ребенок1
ребенок2
ребенок3
ребенок4
поскольку все мои попытки сделать рабочий переход не увенчались успехом, я оставил только функцию переключения, чтобы они мгновенно поменялись местами.
Я попробовал использовать transition-duration, но, поскольку свойства CSS не были определены, ожидалось, что ничего не произойдет.
Заранее спасибо!
И, пожалуйста, не используйте jQuery, так как я никогда им не пользовался, поэтому, если возможно, я был бы признателен за ванильный JavaScript
