Изменение абсолютной позиции элемента с помощью getBoundingClientRect() ⇐ CSS

[Гость]

Я создал небольшую копию своего кода, с которым у меня возникла проблема. Я хотел создать функцию небольшого квадратного элемента (.box), перемещающегося в центр выбранного ответа. В настоящее время он скользит неправильно, поскольку движется совершенно в другом направлении, чем должен. Я предполагаю, что мне нужно будет использовать закомментированную строку // const boxRect = box.getBoundingClientRect(); и поиграть с ее позицией, но несколько раз пробовал безуспешно.

Важно то, что первый слайд должен начинаться с начальной позиции .box, определенной в css. Затем он должен просто изменить свое положение между выбранными ответами.

const { useRef } = React; const ANSWERS = ["ответ 1", "ответ 2", "ответ 3", "ответ 4"]; const App = () => { const boxRef = useRef(null); const handleSelectAnswer = (ответ) => { const selectedAnswerElement = document.querySelector( `[data-ответ="${ответ}"]` ); константное поле = boxRef.current; const AnswersContainer = document.querySelector(".ответы"); if (selectedAnswerElement && box && AnswerContainer) { const selectedAnswerRect = selectedAnswerElement.getBoundingClientRect(); constContainerRect = AnswerContainer.getBoundingClientRect(); // const boxRect = box.getBoundingClientRect(); константное смещениеX = выбранныйAnswerRect.left - контейнерRect.left + выбранныйAnswerRect.width/2; константное смещениеY = выбранныйAnswerRect.top - контейнерRect.top + выбранныйAnswerRect.height/2; box.style.transform = `translate(${offsetX}px, ${offsetY}px)`; } }; возвращаться ( {ANSWERS.map((ответ) => ( handleSelectAnswer(ответ)} > {отвечать} ))} ); }; ReactDOM.render(, document.getElementById("root")); .ответы { маржа: 0 авто; дисплей: сетка; столбцы-шаблона сетки: повторение (2, 270 пикселей); строки-шаблона сетки: повторение (2, 1fr); зазор между столбцами: 1рем; междурядье: 1рем; белый цвет; положение: относительное; ширина: максимальное содержимое; } кнопка .ответы { высота: 150 пикселей; } .коробка { ширина: 50 пикселей; высота: 50 пикселей; цвет фона: светло-голубой; позиция: абсолютная; низ: -25%; слева: 0; правильно: 0; маржа: 0 авто; переход: все 0,5 секунды легкости; z-индекс: 999;