React中使用Framer Motion实现图片动画触发TypeError报错求助

错误原因 #

你遇到的问题核心是transition配置中的type: "smooth"是无效值，Framer Motion并不支持名为"smooth"的过渡类型，这个非法配置导致内部逻辑抛出了未定义属性读取错误。

解决方案 #

1. 修正过渡类型参数 #

将transition的type改为Framer Motion支持的合法值，比如tween（适合平滑的线性/缓动过渡）或spring（弹性过渡）。结合你的往复动画需求，tween更匹配原有预期：

<div className={classes.imgContainer}>
    <img src={gradient} id={classes["gradient"]} alt="gradient" />
    <motion.img
       id={classes["floater"]}
       initial={{ y: -10 }}
       animate={{ y: 10 }}
       transition={{
         type: "tween", // 替换为合法的过渡类型
         repeatType: "mirror",
         duration: 2,
         repeat: Infinity,
       }}
       src={floaterImg}
       alt="floater"
    />
</div>

2. 确保Framer Motion版本兼容 #

如果修正类型后仍有问题，检查你的Framer Motion版本是否过旧。建议升级到最新稳定版：

npm install framer-motion@latest
# 或
yarn add framer-motion@latest

3. 验证基础导入是否正确 #

确认你已正确导入motion组件：

import { motion } from "framer-motion";

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