覆盖 React Framer Motion 中的转换延迟

我创建motion.div组件，其中包含initial, animate and whileTap特性：

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

in变异包含transition与delay: 0.5:

in: {
  x: 0,
  scale: 1,
  transition: { duration: 0.5, delay: 0.5 }
}

但是这个delay: 0.5正在影响onTap变化，即使我明确指定新的delay那里。因此，点击时，它会立即进入“点击”模式，但随后会停止0.5s.在向后动画之前。

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

怎样才能delay值，这意味着animate属性是否会被新变体中定义的新属性覆盖？

遇到了同样的问题，在官方discord中找到了答案。 看起来目前只能使用展开运算符来重置动画状态下的延迟。

这是一个工作示例：https://codesandbox.io/s/motion-transition-70yhg?file=/src/App.js https://codesandbox.io/s/motion-transition-70yhg?file=/src/App.js

复制粘贴：

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>
    );
}