如何正确计算可折叠可排序Div列表动画的最终偏移值？

问题场景 #

用原生JS实现带折叠功能的可排序列表：列表整体保持静态排序，但支持将任意元素移至顶部（可替换），切换顶部元素和折叠元素的过程需要动画过渡。

当前实现思路是给顶部元素加.top类，给静态排序中在顶部元素之前的元素加.before-top类，通过CSS变量--offset控制元素移动距离。但带动画时会出现布局错乱——比如把中间元素设为顶部后，折叠A、B或C都会出问题，核心原因是计算upDelta和downDelta时用了元素当前高度，而非折叠动画结束后的最终高度。

正确解决方案 #

方案1：精准计算折叠前后的高度差 #

不用依赖动态变化的当前高度，直接计算元素折叠/展开后的最终高度差，再调整偏移量：

// 计算折叠/展开的高度变化值
function getHeightChange(foldable, isFolding) {
  // 假设每个列表项的结构是：<div class="header"></div><div class="foldable"></div>
  const header = foldable.previousElementSibling;
  // 折叠后仅保留头部高度，展开后是头部+内容高度
  const collapsedHeight = header.offsetHeight;
  const expandedHeight = header.offsetHeight + foldable.scrollHeight;
  
  return isFolding ? collapsedHeight - expandedHeight : expandedHeight - collapsedHeight;
}

function toggleFolding(target) {
  const foldable = target.nextElementSibling;
  const isFolding = !!foldable.style.maxHeight;
  const parentItem = foldable.parentElement;
  const parentClass = parentItem.className;

  // 先算出高度变化量
  const heightChange = getHeightChange(foldable, isFolding);
  
  // 执行折叠/展开动画
  foldable.style.maxHeight = isFolding ? null : `${foldable.scrollHeight}px`;
  
  // 根据元素类别调整偏移量
  adjustDeltas(heightChange, parentClass);
}

这里用scrollHeight获取折叠内容的真实高度，用offsetHeight获取头部的固定高度，直接算出最终的高度变化值，避免动画过程中读取动态布局属性的误差。

方案2：改用CSS Transform替代手动偏移计算（更省心） #

放弃手动计算--offset，用CSS transform实现元素平移，配合过渡动画和transitionend事件确保布局正确：

CSS 样式

.list-item {
  transition: transform 0.3s ease, max-height 0.3s ease;
  /* 防止元素重叠时的层级问题 */
  position: relative;
}
.before-top {
  /* 通过CSS变量控制向上平移的距离 */
  transform: translateY(calc(var(--translate-y) * -1));
}
.top {
  z-index: 10;
}
.foldable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

JS 逻辑

// 设置顶部元素并计算平移距离
function setTopItem(targetItem) {
  const list = targetItem.parentElement;
  const allItems = Array.from(list.children);
  
  // 清除旧的类和样式
  allItems.forEach(item => {
    item.classList.remove('top', 'before-top');
    item.style.setProperty('--translate-y', '0px');
  });
  
  // 标记新的顶部元素和前置元素
  targetItem.classList.add('top');
  const targetIndex = allItems.indexOf(targetItem);
  const beforeItems = allItems.slice(0, targetIndex);
  beforeItems.forEach(item => item.classList.add('before-top'));
  
  // 计算总平移距离：顶部元素高度 + 所有前置元素的当前高度之和
  const topHeight = targetItem.offsetHeight;
  const beforeTotalHeight = beforeItems.reduce((sum, item) => sum + item.offsetHeight, 0);
  const translateY = topHeight + beforeTotalHeight;
  
  beforeItems.forEach(item => {
    item.style.setProperty('--translate-y', `${translateY}px`);
  });
}

// 折叠动画结束后重新计算平移值，避免动画过程中的布局偏差
document.querySelectorAll('.foldable').forEach(foldable => {
  foldable.addEventListener('transitionend', (e) => {
    if (e.propertyName === 'max-height') {
      const currentTop = document.querySelector('.top');
      currentTop && setTopItem(currentTop);
    }
  });
});

这个方案的核心是用transform做平移，不会影响其他元素的布局流，而且通过transitionend事件在动画完成后重新计算平移距离，彻底避免动态布局带来的计算误差。

关键注意事项 #

• 不要在动画过程中读取offsetTop、offsetHeight这类布局属性，此时元素处于过渡状态，返回的是动态变化的中间值
• 优先用getBoundingClientRect()获取元素的精确位置和尺寸，它返回的是元素在视口中的最终布局信息
• 所有依赖布局的计算，尽量放在transitionend事件回调里执行，确保基于最终状态计算

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