Как использовать FLIP для анимации высоты - PullRequest
Новая
       25

Как использовать FLIP для анимации высоты

0 голосов
/ 10 декабря 2018

Я пытаюсь оживить div от height: 500px до height: 0px.Как правило, это можно сделать transition: height 0.2s ease;.Но я пытался сделать то же самое, используя технику FLIP для повышения производительности.

Я не смог получить желаемый результат, и я запутался.Можно ли это сделать с помощью FLIP?или есть ли эффективный способ оживить рост?потому что анимация высоты пересчитает компоновку, которая неэффективна.

Это то, что я смог сделать 

const card = document.getElementById('card')
window.setTimeout(() => {
  const {
    top,
    left,
    height,
    width
  } = card.getBoundingClientRect()
  card.classList.add('collapsed')
  const {
    top: newTop,
    left: newLeft,
    height: newHeight,
    width: newWidth
  } = card.getBoundingClientRect()

  const translateX = left - newLeft
  const translateY = top - newTop
  const scaleY = height / newHeight
  const scaleX = width / newWidth

  console.log(translateX, translateY, scaleY, scaleX)

  card.style.transformOrigin = 'top left'
  card.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scaleX + ', ' + scaleY + ')';

}, 2000)
.card {
  width: 500px;
  height: 500px;
  background-color: red;
}

.collapsed {
  height: 0px;
}
<div class="card" id="card"></div>

scaleY возвращает Infinity, поскольку 500/0 равно Infinity.Любой вклад поможет.

...