Framer-motion

Question

假设我有一个按钮，当点击它时，会出现一个红色框并向右滑动（为了解释而简化）：

const [start, setStart] = useState(false);

return (
  <>
    <button onClick={() => setStart(true)}>Animate it</button>
    {start && (
      <motion.div
        className='w-20 h-20 bg-red-500'
        initial={{ x: 0 }}
        animate={{ x: 400 }}
      />
    )}
  </>
);

但我想要的是它先放大然后向右滑动（这就是我所说的两步动画的意思）...

Answer 1

定义关键帧

解决您的问题的一个简单方法是为您的 animate 道具设置 keyframes。

animate={{ x: [0, 0, 0, 400], scale: [0, 1, 1, 1] }}

基本上，我有 4 个关键帧，具有 x 和 scale 的 2 个属性：

Frame	Animation values
1 (initial frame)	x: 0; scale: 0
2	x: 0; scale: 1
3	x: 0; scale: 1
4	x: 400; scale: 1

可在 Codesandbox

获得工作演示

Framer-motion - 两步动画

Framer-motion - 2 step animation

reactjs

定义关键帧