如何使用Framer Motion实现反向动画效果

问题根因 #

当前代码将animate属性硬编码为visible，既没有绑定组件显隐状态，也没有配置离场动画的触发逻辑，Framer Motion无法在组件关闭时自动执行反向位移动画。

实现步骤 #

• 首先从framer-motion导入AnimatePresence组件，该组件用于监听内部motion元素的卸载行为，在元素移除前触发预设的离场动画。
• 给Modal组件绑定显隐控制状态，通过条件渲染控制Modal的挂载与卸载。
• 给motion元素配置exit属性，直接复用已有的hidden变体作为离场目标状态，即可实现沿入场原路径反向移出的效果，无需额外编写动画配置。

完整代码示例 #

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

export default function ModalDemo() {
  // 控制Modal开关的状态
  const [isModalOpen, setIsModalOpen] = useState(false);

  const variants = {
    hidden: { x: 400, transition: { duration: 0.3 } },
    visible: { x: 0, transition: { duration: 0.3 } },
  };

  return (
    <div className="page">
      <button onClick={() => setIsModalOpen(true)}>打开Modal</button>
      
      {/* 包裹条件渲染的Modal组件 */}
      <AnimatePresence>
        {isModalOpen && (
          <motion.section
            initial="hidden"
            animate="visible"
            exit="hidden"
            variants={variants}
            className="modal-container"
          >
            <p>Modal内容区域</p>
            <button onClick={() => setIsModalOpen(false)}>关闭Modal</button>
          </motion.section>
        )}
      </AnimatePresence>
    </div>
  );
}

注意事项 #

• AnimatePresence需要直接包裹通过条件渲染控制挂载/卸载的motion元素，中间不要嵌套多层无关节点，否则无法正常识别离场动画触发时机。
• 该方案默认会等离场动画完全执行完毕后，再将Modal从DOM树中移除，不会出现动画未播放完组件直接消失的问题。
• 如果需要自定义离场动画的时长、缓动效果，可直接给exit属性传入单独的动画配置，覆盖variants里的默认参数即可。

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