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

Reactjs 覆盖“反应帧运动”(React Framer Motion)中的过渡延迟,reactjs,typescript,framer-motion,Reactjs,Typescript,Framer Motion,我创建了motion.div组件,其中包含initial、animate和whileTap属性: <motion.button initial={'initial'} animate={'in'} whileTap={'onTap'} variants={introButtonVariants} >...</> 但是这个delay:0.5正在影响onTap变化,即使我在那里明确指定了新的delay。因此,点击时,它会立即进入“点击”模式,但在反向动画之前

我创建了
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>
    );
}