盒子高度如果是 fit-content 高度动态变化的时候 transtion 动画不生效通过 FLIP 方法实现

本文链接：https://blog.youkuaiyun.com/wusandaofwy/article/details/146600130

盒子高度如果是 fit-content 高度动态变化的时候 transtion 动画不生效通过 flip 方法实现

使用 FLIP 动画技术可以优雅地解决动态高度变化的过渡问题，无需预设 max-height。FLIP（First, Last, Invert, Play）通过 JavaScript 动态计算尺寸变化，结合 CSS 变换（Transform）实现平滑过渡。以下是详细实现方案：

FLIP 动画原理
First：记录元素的初始状态（位置、尺寸）
Last：触发变化后，记录最终状态
Invert：计算初始到最终的变化量，用 transform 反转（让元素看似回到初始状态）
Play：移除 transform，让浏览器自动补间过渡

以下是通过 FLIP 动画技术 实现 height: fit-content 动态高度变化的平滑过渡的完整解决方案：

FLIP 实现代码

<!DOCTYPE html>
<style>
  .box {
    width: 300px;
    height: fit-content; /* 高度由内容决定 */
    background: #f0f0f0;
    overflow: hidden;
    cursor: pointer;
  }
  .content {
    padding: 10px;
    transition: transform 0.3s; /* 禁用内容自身过渡 */
  }
</style>

<div class="box" id="box">
  <div class="content" id="content">
    <!-- 初始内容 -->
    Click me to expand!
  </div>
</div>

<script>
  const box = document.getElementById('box');
  const content = document.getElementById('content');
  let isExpanded = false;

  // 点击切换内容高度
  box.addEventListener('click', () => {
    // 1. First：记录初始状态
    const first = box.getBoundingClientRect();

    // 2. 触发高度变化
    if (!isExpanded) {
      content.innerHTML = `
        <h3>Expanded Content</h3>
        <p>This is dynamically loaded content...</p>
        <p>More lines to increase height...</p>
      `;
    } else {
      content.innerHTML = `Click me to expand!`;
    }
    isExpanded = !isExpanded;

    // 3. Last：获取最终状态
    const last = box.getBoundingClientRect();

    // 4. Invert：计算反转变换
    const deltaY = first.top - last.top; /* 垂直位置变化量 */
    const scaleY = first.height / last.height; /* 高度缩放比例 */

    // 5. 应用反转变换
    box.style.transform = `translateY(${deltaY}px) scaleY(${scaleY})`;
    box.style.transformOrigin = 'top'; /* 缩放锚点设置为顶部 */

    // 6. Play：触发过渡动画
    requestAnimationFrame(() => {
      box.style.transition = 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
      box.style.transform = 'none';

      // 动画结束后清除样式
      box.addEventListener('transitionend', () => {
        box.style.transition = '';
      }, { once: true });
    });
  });
</script>

关键原理说明

为什么传统 transition 失效？
height: fit-content 的值是动态计算的，浏览器无法对 auto 或动态值进行插值动画。
FLIP 如何解决问题？
通过 transform 属性模拟高度变化：
• 用 scaleY 模拟高度的缩放
• 用 translateY 修正元素位置跳跃
• 在 JS 中手动计算变换参数
性能优化点
• 使用 requestAnimationFrame 确保流畅的帧同步
• 设置 transformOrigin: 'top' 让缩放从顶部开始，避免内容抖动
• 使用 cubic-bezier 缓动函数让动画更自然

效果对比

状态	传统 transition	FLIP 动画
展开/折叠	无动画或跳跃	平滑的高度缩放+位置修正
动态内容	需要预计算高度	自动适配任意内容变化
渲染性能	可能引起布局抖动	仅触发合成层渲染 (GPU加速)

适用场景

• 动态加载异步内容 (如评论展开)
• 响应式布局中的元素高度变化
• 树形菜单/折叠面板的交互
• 无限滚动列表插入新项

注意事项

内容溢出处理
始终保留 overflow: hidden 避免缩放时内容溢出

复合动画优化
如果同时需要宽度变化，可增加 scaleX 计算：

const scaleX = first.width / last.width;
box.style.transform = `
  translate(${deltaX}px, ${deltaY}px)
  scale(${scaleX}, ${scaleY})
`;

浏览器兼容性
FLIP 依赖现代浏览器 API，如需支持 IE11 需改用 max-height 方案

通过这种方案，即可实现 height: fit-content 的动态高度平滑过渡效果！ 🚀