如何在Framer Motion交错动画完成后为列表项设置圆角

当然可以实现，核心思路是监听整个列表动画序列的完成事件，而非单个列表项的动画结束，再一次性给所有列表项添加圆角样式。下面是两种具体实现方案：

方案1：父容器动画回调触发 #

利用父容器的staggerChildren控制子项交错动画，通过父容器的onAnimationComplete回调监听整个序列结束：

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

const StaggerList = ({ items }) => {
  const [showRounded, setShowRounded] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 1 }}
      animate={{ opacity: 1 }}
      staggerChildren={0.2}
      onAnimationComplete={() => setShowRounded(true)}
    >
      {items.map((item, idx) => (
        <motion.div
          key={idx}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className={`list-item ${showRounded ? "rounded" : ""}`}
        >
          {item}
        </motion.div>
      ))}
    </motion.div>
  );
};

搭配CSS类实现圆角：

.list-item {
  /* 列表项基础样式 */
  padding: 12px;
  border: 1px solid #eee;
}
.rounded {
  border-radius: 8px;
  transition: border-radius 0.3s ease; /* 可选：给圆角加过渡动画 */
}

方案2：useAnimation控制器手动控制 #

如果需要更精细的时序控制，用useAnimation创建控制器，等待所有子项动画完成后触发圆角：

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

const StaggerList = ({ items }) => {
  const [showRounded, setShowRounded] = useState(false);
  const listControls = useAnimation();

  useEffect(() => {
    const runAnimation = async () => {
      // 启动交错动画
      await listControls.start({
        opacity: 1,
        transition: { staggerChildren: 0.2 }
      });
      // 所有动画完成后开启圆角
      setShowRounded(true);
    };
    runAnimation();
  }, [listControls]);

  return (
    <motion.div animate={listControls}>
      {items.map((item, idx) => (
        <motion.div
          key={idx}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className={`list-item ${showRounded ? "rounded" : ""}`}
        >
          {item}
        </motion.div>
      ))}
    </motion.div>
  );
};

关键注意事项 #

• 不要将border-radius写入单个列表项的initial或animate属性中，避免动画过程中提前生效。
• 若需圆角过渡效果，直接在CSS类中设置transition即可，无需通过Framer Motion控制，更简洁高效。

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