如何用CSS transform实现无内容挤压的slideUp替代动画？

项目中用jQuery slideUp()实现点击按钮收起200条列表元素，但CSS height动画引发重排导致卡顿，这是核心功能需要流畅效果。决定用CSS transform实现（GPU处理，可脱离主线程，不受繁重JS任务影响），但尝试用transition: transform复刻slideUp时，scale和translate无法同步，调整content的transform: scale(1, 3) translate(0, -50%);后仍未成功，求成熟方案。

需求：

• 尽量不使用JS
• 动画脱离主线程

尝试代码如下：

$("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%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<button>Collapse</button>
<div class="list-item collapsible">
  <div class="content">
    Just an example <br>
    Just an example <br>
    Just an example <br>
    Just an example <br>
    Just an example <br>
  </div>
</div>
<div class="list-item">
  
</div>
<div class="list-item">
  
</div>

可以通过父元素缩放+内容反向缩放的组合实现无重排的流畅收起动画，完全基于CSS transform（GPU加速，脱离主线程），仅需少量JS触发状态切换（也可以用纯CSS checkbox实现完全无JS）。

核心逻辑：

• 可收起列表项设置transform-origin: top，收起时用transform: scaleY(0)实现高度收缩，该动画由GPU处理，不触发重排。
• 内部内容会被父元素缩放压缩，因此给内容设置反向scaleY并配合translateY，确保收缩过程中内容显示正常，最终移出视野。
• 后续列表项通过transform: translateY向上移动，同样基于transform避免重排。

优化后代码 #

HTML

<!-- 可选：用checkbox实现完全无JS触发 -->
<!-- <input type="checkbox" id="collapseToggle">
<label for="collapseToggle">Collapse</label> -->

<button>Collapse</button>
<div class="list-item collapsible">
  <div class="content">
    Just an example <br>
    Just an example <br>
    Just an example <br>
    Just an example <br>
    Just an example <br>
  </div>
</div>
<div class="list-item"></div>
<div class="list-item"></div>

CSS

.list-item {
  width: 400px;
  height: 100px;
  background-color: blue;
  margin-top: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.collapsible {
  transform-origin: top;
  transition: transform 0.3s ease;
}

.content {
  transform-origin: top;
  transition: transform 0.3s ease;
}

/* 收起状态 */
.collapsible.collapsed {
  transform: scaleY(0);
}

.collapsible.collapsed .content {
  transform: scaleY(1) translateY(-100%);
}

.collapsible.collapsed ~ .list-item {
  transform: translateY(-110px);
}

/* 纯CSS触发样式（可选） */
/* #collapseToggle { display: none; }
#collapseToggle:checked ~ .collapsible {
  transform: scaleY(0);
}
#collapseToggle:checked ~ .collapsible .content {
  transform: scaleY(1) translateY(-100%);
}
#collapseToggle:checked ~ .collapsible ~ .list-item {
  transform: translateY(-110px);
} */

JS（仅用于触发状态，可替换为纯CSS）

$("button").on("click", function() {
  $(".collapsible").toggleClass("collapsed")
});

方案优势 #

1. 所有动画均基于transform属性，由GPU接管，不会触发浏览器重排/重绘，主线程有繁重任务时仍能保持流畅。
2. 父元素缩放+内容反向缩放的组合，视觉效果完全匹配slideUp，不会出现内容压缩变形。
3. 后续元素的位移动画同步跟进，实现列表收起后下方元素平滑上移的效果。
4. 可通过CSS checkbox完全移除JS，满足"尽量不使用JS"的需求。

内容的提问来源于stack exchange，提问作者cytek04