如何在不挤压内容的情况下通过变换对高度进行动画处理-PHP中文网问答

在我的项目中，当用户单击按钮时，我一直在使用 jQuery slideUp() 向上滑动 200 项列表中的元素。但是，众所周知，CSS 高度动画需要回流，从而导致动画不稳定。该动画是应用程序的一个组成部分，我愿意做大量的工作以使其工作并顺利工作。

我决定 CSS transform 是让它顺利工作的方法，因为它是在 GPU 上处理的，在一些现代浏览器上，它甚至脱离了主线程，繁重的 JS 工作不会影响变换。（我确实有繁重的 JS 工作）。

我正在寻找一个使用CSS transition的巧妙解决方案：transform来复制jQuery slideUp，它只是为height属性设置动画。以下是我的尝试，但似乎 scale 和 translate 未按预期同步。

$("button").on("click", function() {
  $(".collapsible").addClass("collapsed")
  setTimeout(function() {
    $(".collapsible").removeClass("collapsed")
  }, 5000);
});

.list-item {
  width: 400px;
  height: 100px;
  background-color: blue;
  margin-top: 10px;
  overflow-y: hidden;
}

.collapsible.collapsed .content {
  transition: transform 3s linear;
  transform: scale(1, 1) translate(0, -100%);
}

.collapsible.collapsed {
  transition: transform 3s linear;
  transform: translate(0, -50%) scale(1, 0);
}

.collapsible.collapsed ~ .list-item {
  transition: transform 3s linear;
  transform: translate(0, -100%);
}




  
    Just an example 

    Just an example 

    Just an example 

    Just an example 

    Just an example

我对这些值进行了一些修改，并通过将 content 转换更改为 transform:scale(1, 3) translate(0, -50%); 来使其更接近。

看来我已经非常接近实现目标，但从未完全成功。有什么现成的技巧可以做到这一点吗？

要求：

最好没有 JS
脱离主线程