能否将React.Fragment与Framer Motion的motion组件结合使用？

你不能直接用React.Fragment替换motion.div，原因很简单：React.Fragment不会渲染成真实的DOM节点，而Framer Motion的动画逻辑必须绑定到实际存在的DOM元素上才能生效。下面是几种可行的替代方案：

方案一：使用语义化motion元素替代 #

如果你的布局允许，用motion.span、motion.article这类语义化元素替换motion.div，既不会添加多余的无意义节点，又能保留动画效果。比如你原来的div是用来设置flex布局，直接换成motion.span并保留类名即可：

"use client";
import * as React from "react";
import { motion } from "framer-motion";

const ItemTransition = ({
  children,
  delay,
}: {
  children: React.ReactNode;
  delay: number;
}) => {
  return (
    <motion.span 
      className="flex"
      initial={{ opacity: 0, x: 40 }}
      animate={{
        opacity: 1,
        x: 0,
        transition: { delay: delay, duration: 1.5 },
      }}
      exit={{ opacity: 0, x: 40 }}
      transition={{ duration: 3 }}
    >
      {children}
    </motion.span>
  );
};

export default ItemTransition;

方案二：直接为子元素添加动画（单元素场景） #

如果你的children是单个DOM元素或自定义组件，可以直接把动画属性绑定到子元素上，用motion()函数包装子组件类型：

"use client";
import * as React from "react";
import { motion } from "framer-motion";

const ItemTransition = ({
  children,
  delay,
}: {
  children: React.ReactElement;
  delay: number;
}) => {
  // 将子元素转为可动画的motion组件
  const AnimatedChild = motion(children.type as React.ElementType);
  // 克隆子元素并添加动画属性
  return React.cloneElement(AnimatedChild, {
    initial: { opacity: 0, x: 40 },
    animate: {
      opacity: 1,
      x: 0,
      transition: { delay: delay, duration: 1.5 },
    },
    exit: { opacity: 0, x: 40 },
    transition: { duration: 3 },
    ...children.props,
  });
};

export default ItemTransition;

注意：此方案仅适用于children是单个React元素的场景，不能处理多个元素的集合。

方案三：使用motion.fragment（Framer Motion v10+） #

如果你用的是Framer Motion v10及以上版本，可以用motion.fragment——它不会生成额外DOM节点，还能为多个子元素统一应用动画，适合配合AnimatePresence处理进入/退出动画：

"use client";
import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";

const ItemTransition = ({
  children,
  delay,
}: {
  children: React.ReactNode;
  delay: number;
}) => {
  return (
    <motion.fragment
      initial={{ opacity: 0, x: 40 }}
      animate={{
        opacity: 1,
        x: 0,
        transition: { delay: delay, duration: 1.5 },
      }}
      exit={{ opacity: 0, x: 40 }}
      transition={{ duration: 3 }}
    >
      {children}
    </motion.fragment>
  );
};

// 父组件中需要用AnimatePresence包裹
export const ParentComponent = () => {
  const [showItems, setShowItems] = React.useState(true);
  return (
    <AnimatePresence>
      {showItems && (
        <ItemTransition delay={0.2}>
          <p>动画元素1</p>
          <p>动画元素2</p>
        </ItemTransition>
      )}
    </AnimatePresence>
  );
};

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