Next.js中Framer-Motion动画开发模式正常但构建模式异常

问题描述 #

使用next dev运行时，Framer-Motion的页面缩放动画表现正常；但执行next build+next start后，页面退出动画时文本从左上角缩小，而非中心。

解决方案 #

1. 显式设置变换原点 #

给motion.div添加transformOrigin: "center"样式，强制动画以元素中心为原点：

<motion.div
  key={router.route}
  initial="pageInitial"
  animate="pageAnimate"
  exit="pageExit"
  style={{ transformOrigin: "center" }} // 新增该行
  variants={{
    pageInitial: {
      opacity: 0,
      scale: 0.9,
    },
    pageAnimate: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.5,
      },
    },
    pageExit: {
      opacity: 0,
      scale: 0.9,
      transition: {
        duration: 0.5,
      },
    },
  }}
>
  <Component {...pageProps} />
</motion.div>

原因：生产环境下Next.js的CSS优化可能覆盖默认transform-origin值，显式设置可确保动画原点正确。

2. 检查Layout组件样式 #

排查Layout组件中的容器样式，比如是否存在position: absolute、overflow: hidden或其他影响布局上下文的属性，这类设置可能导致motion元素的变换原点偏移。

3. 禁用SWC压缩（Next.js 13+） #

若使用Next.js 13及以上版本，SWC代码压缩可能与Framer-Motion存在兼容性问题，可在next.config.js中禁用：

module.exports = {
  swcMinify: false,
}

4. 升级依赖版本 #

尝试更新framer-motion和next到最新稳定版本，版本不兼容也可能引发这类生产环境特有的动画异常。

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