在关键帧动画之间切换时，成帧器运动不会过渡答案

【问题标题】：framer motion is not transitioning when switched between keyframe animations在关键帧动画之间切换时，成帧器运动不会过渡
【发布时间】：2023-02-07 16:05:32
【问题描述】：

我有 2 个关键帧动画变体，当我在它们之间切换时，我希望它随着过渡发生。当从一个关键帧动画切换到另一个关键帧动画时（目前它是立即发生的），我怎样才能让它转换所有道具？

const variants = {
  ...,
  horizontalWiggle: {
    x: ["40px", "80px"],
    y: [0, 0],
    transition: { duration: 0.5, yoyo: Infinity }
  },
  verticalWiggle: {
    x: [0, 0],
    y: ["8px", "40px"],
    transition: { duration: 0.5, yoyo: Infinity }
  }
}

像这样使用成帧器运动：

<motion.div
 className="wiggle"
 variants={variations}
 initial="init"
 animate={vertical ? "verticalWiggle" : "horizontalWiggle"}
/>

沙盒链接：https://codesandbox.io/s/long-surf-405lho?file=/src/App.js

【问题讨论】：

标签： javascript reactjs animation framer-motion

【解决方案1】：

这个想法是停止老动画和开始来自相同值（相同关键帧）的新动画。这样就不会有瞬间跳跃。

完整示例在这里：

简短示例：

const variations = {
  ...
  horizontalWiggle: {
    x: [0, 40, 80, 0],
    y: 0,
    transition: { duration: 1, repeat: Infinity }
  },
  verticalWiggle: {
    x: 0,
    y: ["0px", "20px", "40px", "0px"],
    transition: { duration: 1, repeat: Infinity }
  }
};

【讨论】：