Framer Motion动画结束时元素缩放异常问题求助

问题原因 #

你遇到的跳变是因为**layoutId触发的布局动画与手动设置的animate缩放动画发生了属性冲突**。Framer Motion的layoutId会自动处理元素的布局变换（位置、尺寸等），同时手动声明animate={{ scale: 1.5 }}会让两个动画在结束阶段的变换计算叠加，导致瞬间突增后跳回目标值。

解决方案 #

方案1：将缩放合并到layout过渡中

移除单独的animate配置，把缩放逻辑整合到layout的过渡控制里，让Framer Motion统一处理布局与缩放动画：

<ModalOverlay onClick={toggleModal}>
    <motion.div
        onClick={(e) => e.stopPropagation()}
        layoutId={dragon.name}
        layout
        transition={{
            scale: { duration: 0.3 },
            position: { duration: 0.3 }
        }}
        style={{ scale: 1.5 }}
    >
        <CardModal dragon={dragon} />
    </motion.div>
</ModalOverlay>

方案2：分离layout与缩放动画的职责

让layoutId仅负责位置过渡，手动控制缩放动画，通过layout="position"禁用layout对尺寸/缩放的自动处理：

<ModalOverlay onClick={toggleModal}>
    <motion.div
        onClick={(e) => e.stopPropagation()}
        layoutId={dragon.name}
        layout="position"
        initial={{ scale: 1 }}
        animate={{ scale: 1.5 }}
        transition={{ duration: 0.3 }}
    >
        <CardModal dragon={dragon} />
    </motion.div>
</ModalOverlay>

方案3：显式设置变换原点（辅助优化）

如果跳变是因为变换原点计算异常，可显式指定transformOrigin确保缩放基于中心：

<motion.div
    onClick={(e) => e.stopPropagation()}
    layoutId={dragon.name}
    animate={{ scale: 1.5 }}
    style={{ transformOrigin: "center center" }}
>
    <CardModal dragon={dragon} />
</motion.div>

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