Reactjs 覆盖“反应帧运动”（React Framer Motion）中的过渡延迟

我创建了

motion.div

组件，其中包含

initial

、

animate

和

whileTap

属性：

<motion.button
  initial={'initial'}
  animate={'in'}
  whileTap={'onTap'}
  variants={introButtonVariants}
>...</>

但是这个

delay:0.5

正在影响

onTap

变化，即使我在那里明确指定了新的

delay

。因此，点击时，它会立即进入“点击”模式，但在反向动画之前，它会停止

0.5s.

onTap: {
  scale: 0.8,
  transition: { scale: { delay: 0 } }
}

---

新变体中定义的新属性如何覆盖

animate

属性的

delay

值？

也面临同样的问题，并在官方意见分歧中找到了答案。 看起来现在只有使用“扩散”操作符才能在动画状态下重置延迟

以下是一个工作示例：

复制粘贴：

const size = 200;
const radius = 40;
const color = "#0CF";
const curve = {
    type: "spring",
    stiffness: 400,
    damping: 30
};

export default function App() {
    const variants = {
        active: { scale: 1.25, transition: { ...curve, delay: 2 } },
        hovering: {
            scale: 1.5,
            rotate: 180,
            transition: { ...curve, delay: 0 }
        }
    };

    return (
        <div className="App">
            <motion.div
                style={{
                    width: size,
                    height: size,
                    backgroundColor: color,
                    borderRadius: radius
                }}
                variants={variants}
                animate={"active"}
                whileHover={"hovering"}
                transition={{ ...curve }}
            />
        </div>
    );
}

const size=200；
常数半径=40；
const color=“#0CF”；
常数曲线={
类型：“弹簧”，
刚度：400，
阻尼：30
};
导出默认函数App（）{
常量变量={
活动：{比例：1.25，过渡：{…曲线，延迟：2}，
悬停：{
比例：1.5，
轮换：180，
过渡：{…曲线，延迟：0}
}
};
返回(
);
}

刚刚尝试复制您的场景，但在和onTap中，动画使用了自己的延迟。这是你的电话号码。检查一下你自己对不起，我误解了这个问题。现在我可以看到动画在正确的时间开始，但它在“激活”模式下停留了1.5秒。我希望运动不会停止，也不会像激活一样以同样的速度停止。无论如何，谢谢你的努力。

const size = 200;
const radius = 40;
const color = "#0CF";
const curve = {
    type: "spring",
    stiffness: 400,
    damping: 30
};

export default function App() {
    const variants = {
        active: { scale: 1.25, transition: { ...curve, delay: 2 } },
        hovering: {
            scale: 1.5,
            rotate: 180,
            transition: { ...curve, delay: 0 }
        }
    };

    return (
        <div className="App">
            <motion.div
                style={{
                    width: size,
                    height: size,
                    backgroundColor: color,
                    borderRadius: radius
                }}
                variants={variants}
                animate={"active"}
                whileHover={"hovering"}
                transition={{ ...curve }}
            />
        </div>
    );
}