javascript - 如何使用 FLIP 制作高度动画

Question

我正在尝试将 div 从height: 500pxto设置为动画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任何输入都会有所帮助。