如何用Framer Motion实现列表展开时下方内容平滑下移动画？

核心实现思路 #

• 通过状态变量控制列表的显示/隐藏
• 为列表添加淡入+高度展开的组合动画，避免突然出现的生硬感
• 利用Framer Motion的layout属性，让下方内容感知布局变化并自动生成平滑位移动画

具体代码实现 #

首先导入所需依赖：

import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

完整组件代码：

export default function App() {
  const [showList, setShowList] = useState(false);

  return (
    <div className="container">
      <button onClick={() => setShowList(!showList)}>
        {showList ? "收起列表" : "展开列表"}
      </button>

      {/* 带淡入动画的列表容器 */}
      <AnimatePresence>
        {showList && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.3 }}
            style={{ overflow: "hidden" }}
            className="list-container"
          >
            <ul>
              <li>列表项1</li>
              <li>列表项2</li>
              <li>列表项3</li>
              <li>列表项4</li>
            </ul>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 下方内容框：开启layout实现平滑位移 */}
      <motion.div
        layout
        transition={{ duration: 0.3 }}
        className="content-box"
      >
        下方内容框
      </motion.div>
    </div>
  );
}

配套基础样式（增强视觉效果）：

.container {
  max-width: 400px;
  margin: 20px auto;
  padding: 0 20px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}

.list-container {
  margin: 16px 0;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 4px;
}

.content-box {
  padding: 24px;
  background: #e3f2fd;
  border-radius: 4px;
}

关键细节说明 #

• AnimatePresence：负责处理组件挂载/卸载时的动画，确保列表收起时也有平滑的淡出+高度收缩效果
• 列表的height动画：配合overflow: hidden，让列表从0高度平滑过渡到自适应高度，避免布局突然跳动
• layout属性：为下方内容的motion.div添加该属性后，组件会自动监听父级布局变化，无需手动计算位移，就能实现平滑的位置过渡

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