如何在Framer Motion中结合滚动插值justifyContent属性？

AI 小北

2026-8-1

解决justify-content无法从center过渡到left的问题

问题原因

Framer Motion 没法直接对 justify-content 的字符串值（比如"center"、"left"）做平滑过渡——这类离散的布局属性不属于可插值的数值类型，CSS原生也不支持对它们做过渡动画。

解决方案

你可以用以下两种方式实现类似效果：

方案1：用translateX动画替代

给内部元素（比如你的Image）添加水平位移动画，模拟justify-content的变化：

function Navbar() {
  const { scrollY } = useScroll();
  // 计算位移值：从50% - 自身宽度一半（居中）到0（左对齐）
  const translateX = useTransform(scrollY, [0, 100], ["calc(50% - 50px)", "0px"]);

  return (
    <div className={styles.parent} style={{ display: "flex" }}>
      <motion.Image
        src="/BlackLogo-2.svg"
        alt="Cg Logo"
        width={100}
        height={100}
        style={{ padding: 20, x: translateX }}
        transition={{ duration: 0.5 }}
      />
    </div>
  );
}

方案2：配合容器宽度变化实现

如果父容器有固定宽度，可通过动画容器宽度间接实现对齐变化：

function Navbar() {
  const { scrollY } = useScroll();
  const containerWidth = useTransform(scrollY, [0, 100], ["100%", "fit-content"]);

  return (
    <div className={styles.parent} style={{ display: "flex", justifyContent: "center" }}>
      <motion.div 
        style={{ width: containerWidth }}
        transition={{ duration: 0.5 }}
      >
        <Image
          src="/BlackLogo-2.svg"
          alt="Cg Logo"
          width={100}
          height={100}
          style={{ padding: 20 }}
          priority
        />
      </motion.div>
    </div>
  );
}