Как переместить div из сетки с помощью js и css ⇐ CSS

[Гость]

У меня есть несколько мест div в другом div с display: Grid;. Мне бы хотелось, чтобы, когда я нажимаю на один из этих элементов div, он плавно перемещался к середине окон. На данный момент у меня есть это:

const themeBox = document.getElementById("theme-box"); for (let i = 0; i { themeButton.classList.add("анимировать по центру"); }); themeBox.appendChild(themeButton); .theme-button { поле: 10 пикселей; высота: 20ем; ширина: 20ем; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; переход: преобразование 0,5 с; } .theme-button.animate-to-center { трансформировать: транслировать(-50%, -50%); маржа: 0; ширина: 20ем; высота: 20ем; позиция: абсолютная; верх: 50%; осталось: 50%; z-индекс: 1;

Как вы можете видеть, я использую position: Absolute;, поэтому он не зависит от сетки в начале анимации, но при этом элемент div телепортируется, потому что его позиция больше не определяется сеткой, и это моя проблема.