Framer Motion - 陈旧的自定义值 - 更改自定义值不会触发更新

Question

使用 framer-motion，我遇到一个问题，我将传递给 custom 道具的对象更新为 motion.div 变体不会触发预期的样式更改。

我创建了以下沙箱来演示该问题：

https://codesandbox.io/s/framer-motion-stale-custom-fibp5?file=/src/App.js

我的期望是，当我切换主题时 - 圆圈的 on/off 颜色将根据新主题立即改变。（从 black/white 到 darkblue/yellow，反之亦然）。

但是，主题更改仅在动画值更改后应用（状态从“打开”更改为“关闭”等）所以当我切换主题时，我显示的是“陈旧”的主题值直到我也切换状态 (on/off).

如有任何帮助，我们将不胜感激。

Answer 1

是的，似乎很出乎意料，也许这是一个错误。

不确定这是否适用于您的用例，但您现在可以做的是使用 React key 属性在主题更改后强制 motion.div 重新渲染。像那样：

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

请注意，我还设置了 initial={false}，否则动画将在 off 状态事件开始，如果您确实处于 on。

Codesandbox：https://codesandbox.io/s/httpsWhosebugcomquestions64027738-cwj9k?file=/src/App.js

Framer Motion - 陈旧的自定义值 - 更改自定义值不会触发更新

Framer Motion - stale custom value - changing the custom value doesn't trigger an update

javascript

reactjs

framer-motion