本文介绍一种基于原生 javascript 和 css 的高效方案，利用 flip 动画技术解决动态重排序与折叠动画冲突的问题，确保元素在置顶切换和展开/收起时均呈现自然、精准的过渡效果。
本文介绍一种基于原生 javascript 和 css 的高效方案，利用 flip 动画技术解决动态重排序与折叠动画冲突的问题，确保元素在置顶切换和展开/收起时均呈现自然、精准的过渡效果。
在构建交互式列表（如可折叠、可置顶排序的面板集合）时，常见的痛点是：当元素位置因排序逻辑改变，同时又存在高度变化动画（如 max-height 折叠）时，CSS 布局计算与动画时机不同步，导致位移错乱、跳动或偏移失效。原始方案试图通过动态注入 --offset 自定义属性并配合 translate 实现位移，但因依赖运行时 DOM 尺寸（如 offsetTop），而该尺寸在折叠动画进行中尚未稳定，故无法准确预判最终布局——本质上是“用当前状态预测未来布局”，必然失败。
真正的解法在于 FLIP 技术（First, Last, Invert, Play）：它不预测，而是测量 → 瞬间重排 → 测量 → 反向位移 → 播放动画。整个过程绕过布局计算难题，将复杂动画拆解为可控的 CSS transform 动画，与 max-height 等布局动画完全解耦。
✅ 核心改进点
用 flex + order 替代手动位移类
移除 .before-top 及其 --offset 计算逻辑。只需为置顶项设置 order: -1，其余保持默认 order: 0，浏览器自动完成视觉排序，无需 JS 干预位置偏移。-
FLIP 动画四步闭环（纯原生实现）
- F (First)：记录重排前每个元素的 getBoundingClientRect()
- L (Last)：立即应用新排序（如修改 order），触发浏览器重排
- I (Invert)：再次获取 getBoundingClientRect()，计算各元素需反向位移的 deltaX/deltaY
- P (Play)：调用 element.animate() 执行从反向位移到 transform: none 的平滑过渡
折叠动画完全独立
toggleFolding() 仅控制 .body 的 max-height，其 CSS transition: max-height 1s ease 与 FLIP 动画互不干扰——因为 FLIP 在重排后瞬间完成位移补偿，折叠引发的后续布局变化不再影响已启动的 transform 动画。
? 完整实现代码
<input id="input" type="text" placeholder="Enter top item!" autofocus /> <div class="container"> <div id="A" class="item"><div class="head">A</div><div class="body">aa</div></div> <div id="B" class="item"><div class="head">B</div><div class="body">bb</div></div> <div id="C" class="item"><div class="head">C</div><div class="body">cc</div></div> <div id="D" class="item"><div class="head">D</div><div class="body">dd</div></div> <div id="F" class="item"><div class="head">F</div><div class="body">ff</div></div> </div>
.container {
display: flex;
flex-direction: column;
gap: 0.5rem; /* 更语义化的间距替代 margin */
}
.item {
width: 10rem;
margin: 0;
text-align: center;
line-height: 3rem;
opacity: 0.7;
transition: opacity 0.2s; /* 可选：增强交互反馈 */
}
.head {
height: 3rem;
cursor: pointer;
}
.body {
height: 2rem;
max-height: 0;
overflow: hidden;
transition: max-height 1s ease;
}
.top {
order: -1;
}
/* 可选：高亮置顶项 */
.top { opacity: 1; font-weight: bold; }let oldState = [];
let newState = [];
function assignClasses() {
const input = document.getElementById('input').value.trim();
if (!input) return;
const items = Array.from(document.querySelectorAll('.item'));
const targetItem = items.find(el => el.querySelector('.head').textContent === input);
if (!targetItem) return;
// F: 记录重排前位置
oldState = items.map(el => el.getBoundingClientRect());
// L & I: 应用新 order 并立即读取新位置
items.forEach(el => el.classList.toggle('top', el === targetItem));
newState = items.map(el => el.getBoundingClientRect());
// P: 执行 FLIP 动画
items.forEach((el, idx) => {
const { left: oldLeft, top: oldTop } = oldState[idx];
const { left: newLeft, top: newTop } = newState[idx];
const deltaX = oldLeft - newLeft;
const deltaY = oldTop - newTop;
el.animate(
[
{ transform: `translate(${deltaX}px, ${deltaY}px)`, transformOrigin: 'top left' },
{ transform: 'none' }
],
{ duration: 1000, easing: 'ease', fill: 'both' }
);
});
}
function toggleFolding(target) {
const foldable = target.nextElementSibling;
if (!foldable || !foldable.classList.contains('body')) return;
foldable.style.maxHeight = foldable.style.maxHeight ? null : `${foldable.scrollHeight}px`;
}
// 绑定事件
document.querySelectorAll('.head').forEach(head => {
head.addEventListener('click', e => toggleFolding(e.currentTarget));
});
document.getElementById('input').addEventListener('change', assignClasses);
// 支持回车提交
document.getElementById('input').addEventListener('keypress', e => {
if (e.key === 'Enter') assignClasses();
});⚠️ 注意事项与最佳实践
- getBoundingClientRect() 是关键：它返回相对于视口的精确像素坐标，不受父容器 transform 影响，适合 FLIP 测量。
- 避免在动画中频繁读写 layout：FLIP 将读取（F/L）集中于两处，中间无其他 DOM 读操作，防止强制同步布局（layout thrashing）。
- fill: 'both' 不可省略：确保动画结束后元素保持 transform: none 状态，避免影响后续交互或折叠动画。
- 折叠区域需明确高度：.body 设置固定 height 或使用 scrollHeight（如示例），保证 max-height 过渡平滑；若内容动态，建议结合 ResizeObserver 更新。
- 无障碍增强：为 .head 添加 role="button" 和 aria-expanded 属性，提升可访问性。
通过 FLIP 技术，你不再需要猜测动画终点——而是让浏览器告诉你“它将去哪”，再优雅地“送它过去”。这不仅是技术方案的升级，更是对 Web 动画本质的一次回归：以测量代替估算，以原子操作保障稳定性，以分离关注点换取可维护性。
