覆盖 React Framer Motion 中的过渡延迟

Question

我创建了 motion.div 组件，其中包含 initial、animate 和 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 属性，被新变体中定义的新值覆盖？

Answer 1

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

这是一个工作示例： 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>
    );
}

覆盖 React Framer Motion 中的过渡延迟

Override the transition delay in React Framer Motion

reactjs

typescript

framer-motion