Привет, подскажите пожалуйста как плавно центрировать элемент из любой позиции?

Question

Есть поле карточек 3x3, и когда пользователь кликает на любую, то она плавно идёт в центр и занимает весь экран.

Answer 1

Если карточки расположены рандомно, то с шириной и высотой DOM-элемента такое сделать будет трудновато + ресурсозатратно.

generateCards(20)

document.body.addEventListener('click', pickCard)

function pickCard({ target }) {
  if(target.tagName !== 'DIV') return
  target.style.zIndex = 1000;
  
  const { left, top, width, height } = target.getBoundingClientRect()
  const cx = innerWidth  / 2
  const cy = innerHeight / 2
  // расстояние от центра до карточки по оси x
  const dx = cx - left - width/2
  // расстояние от центра до карточки по оси y
  const dy = cy - top - height/2
  const scale_x = innerWidth  / width
  const scale_y = innerHeight / height
  
  // перемещение в центр
  translate(target, left + dx, top + dy)
  // увеличение
  setTimeout(() => scale(target, scale_x, scale_y), 1500)
}

function generateCards(n) {
  for(let i = 0; i < n; i++) {
    const card = document.createElement('div')
    const x = Math.random() * innerWidth 
    const y = Math.random() * innerHeight
    translate(card, x, y)
    scale(card, 1, 1)
    document.body.appendChild(card)
  }
}

function translate(el, x, y) {
  el.style.setProperty('--tx', x + 'px')
  el.style.setProperty('--ty', y + 'px')
}

function scale(el, sx, sy) {
  el.style.setProperty('--sx', sx)
  el.style.setProperty('--sy', sy)
}

body {
  overflow: hidden;
}

div {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: tomato;
  transition: transform 1.5s;
  transform: translate(var(--tx), var(--ty)) scale(var(--sx), var(--sy));
}

Если расположены не случайно, то вот:

onclick = ({ target }) => {
  if (target.tagName !== 'DIV') return
  target.style.transform = 'translateX(0)'
  target.style.zIndex = 1000

  setTimeout(() => {
    target.style.width = innerWidth + 'px'
    target.style.height = innerHeight + 'px'
  }, 1000)
}

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  position: absolute;
  height: 60vh;
  width: 20vw;
  transition: 1s;
  background-color: lightblue;
}

div:nth-of-type(2) {
  transform: translateX(-30vw);
  background-color: lightgreen;
}

div:nth-of-type(3) {
  transform: translateX(30vw);
  background-color: tomato;
}

<div></div>
<div></div>
<div></div>

БЛОГ НА HUSL

Привет, подскажите пожалуйста как плавно центрировать элемент из любой позиции?

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