如何使用FLIP设置高度动画

Question

我正在尝试将height: 500px到height: 0px的div设置为动画。通常，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。任何输入都会有所帮助。