javascript - Framer Motion - 过时的自定义值 - 更改自定义值不会触发更新

Question

使用 framer-motion ，我有一个问题是更新我在 custom 上传递的对象支持 motion.div变体不会触发预期的样式更改。
我创建了以下沙箱来演示该问题:
https://codesandbox.io/s/framer-motion-stale-custom-fibp5?file=/src/App.js
我的期望是，当我切换主题时 - 圆圈的开/关颜色将根据新主题立即改变。 (从黑色/白色到深蓝色/黄色，反之亦然)。
但是，主题更改仅在动画值更改后应用(状态从“开”变为“关”等)所以当我切换主题时，我会显示一个“陈旧”的主题值，直到我也切换状态(开/关)。
任何帮助将不胜感激。

Answer 1

是的，似乎很意外，也许这是一个错误。
不确定这是否适用于您的用例，但您现在可以做的是使用 React key Prop 给力motion.div主题更改后重新渲染。像那样:

      <motion.div
        key={theme}
        style={styles.circle}
        variants={VARIANTS}
        animate={status}
        initial={false}
        custom={theme}
      />

请注意，我还设置了 initial={false}因为否则动画将从 off开始如果你真的在 on 状态事件.
密码箱: https://codesandbox.io/s/httpsstackoverflowcomquestions64027738-cwj9k?file=/src/App.js