Framer Motion中父容器高度动画失效问题解析

问题现象

在使用Framer Motion进行动画开发时，开发者遇到了一个常见的布局动画问题：当从父容器中移除子元素时，父容器的高度不会平滑过渡，而是直接跳变到新高度。具体表现为：

1. 添加元素时，父容器高度动画工作正常
2. 移除元素时，子元素的退出动画可以执行，但父容器高度变化没有过渡效果
3. 尝试修改AnimatePresence的mode属性无法解决问题

技术背景

Framer Motion是一个流行的React动画库，它提供了声明式的API来创建流畅的用户界面动画。其中Layout动画功能允许元素在布局变化时自动产生过渡效果，而不需要手动指定每个属性的变化。

问题原因

经过分析，这个问题源于Framer Motion的布局动画触发机制：

1. 布局动画仅在组件渲染时触发
2. AnimatePresence在最终移除元素时的渲染是内部行为
3. 父容器无法感知到子元素即将被移除的状态变化

解决方案

正确的处理方式是使用LayoutGroup组件包裹需要同步布局动画的容器。LayoutGroup的作用是：

1. 创建一个共享的布局上下文
2. 跟踪组内所有元素的布局变化
3. 协调元素间的布局动画时序

实现示例

import { LayoutGroup } from "framer-motion"

function App() {
  return (
    <LayoutGroup>
      <motion.ul layout>
        <AnimatePresence>
          {items.map(item => (
            <motion.li
              key={item}
              layout
              exit={{ opacity: 0 }}
            >
              {item}
            </motion.li>
          ))}
        </AnimatePresence>
      </motion.ul>
    </LayoutGroup>
  )
}

版本兼容性说明

在Framer Motion 4.0版本中，这个问题可以通过AnimateSharedLayout解决。但在新版本中，该组件已被LayoutGroup替代，开发者应注意API的变化。

最佳实践建议

1. 对于需要同步布局动画的元素组，总是使用LayoutGroup包裹
2. 确保需要动画的元素都添加了layout属性
3. 复杂的退出动画场景需要仔细测试不同mode参数的效果
4. 考虑动画性能，避免在大型列表中使用过于复杂的布局动画

总结

Framer Motion的布局动画功能强大但有其特定的使用模式。理解LayoutGroup的作用机制可以帮助开发者避免常见的动画协调问题，创建更加流畅的用户体验。当遇到父容器动画不跟随子元素变化的情况时，首先应该考虑是否缺少了必要的布局上下文包装。