Перемещение блока из одного родительского блока в другой с анимацией React.js

Question

Я уже видел достаточно много таких штук, где как кажется дочерний блок перепрыгивает между родительскими, особенно часто с вкладками. Я знаю, что я бы мог считать всё по пикселям, но мне такой вариант не нравится.

Мне в данном случае, нужно как в первом примере, при наведении на блок или нажатии, чтобы такая обводка перепрыгивала с предыдущего блока на следующий.

В React я бы просто хотел, что-то вроде

<Grid>
  {/* row 1 */}
  <Tab/>
  <Tab/>
  <Tab/>
  {/* row 2 */}
  <Tab/>
  <Tab active/>
  <Tab/>
  {/* row 3 */}
  <Tab/>
  <Tab/>
  <Tab/>
</Grid>

Answer 1

Попытался сделать то что на первом примере, думаю второй можно будет сделать по аналогии. Да и честно признаюсь, то что я отнимаю 8 в скрипте, я это значение подобрал перебором (она точно зависит от какого-то св-ва CSS). Очень сильно помог пример из документации

const focusBorder = document.querySelector('.focus-border');

document.querySelector('.grid').addEventListener('click', (e) => {
  const target = e.target;
  
  if (!target.classList.contains('grid-cell')) return;
  
  const targetRect = target.getBoundingClientRect();
  
  focusBorder.style.width = targetRect.width + 'px';
  focusBorder.style.height = targetRect.height + 'px';
  focusBorder.style.transform = 'translateY(' + (targetRect.y - 8) + 'px)';
  focusBorder.style.transform += 'translateX(' + (targetRect.x - 8) + 'px)';
});

:root{
  --cell-size: 32px;
}

.grid {
  display: grid;
  grid-template-columns: var(--cell-size) calc(var(--cell-size) * 1.5) calc(var(--cell-size) * 2);
  grid-gap: calc(var(--cell-size) / 2);
  position: relative;
}

.grid-cell {
  height: var(--cell-size);
  width: 100%;
  background-color: red;
}

.focus-border {
  position: absolute;
  height: var(--cell-size);
  width: var(--cell-size);
  top: 0;
  left: 0px;
  outline: calc(var(--cell-size) / 8) solid green;
  transition: all 0.5s;
}

<div class="grid">
  <div class="focus-border"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
</div>

БЛОГ НА HUSL

Перемещение блока из одного родительского блока в другой с анимацией React.js

Ответы (1 шт):