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

【问题标题】：Framer Motion - stale custom value - changing the custom value doesn't trigger an updateFramer Motion - 过时的自定义值 - 更改自定义值不会触发更新
【发布时间】：2020-09-23 12:14:46
【问题描述】：

使用framer-motion，我遇到了一个问题，即更新我通过custom 属性传递给motion.div 变体的对象不会触发预期的样式更改。

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

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

我的期望是，当我切换主题时，圆圈的开/关颜色会立即根据新主题而改变。（从黑色/白色到深蓝色/黄色，反之亦然）。

但是，主题更改仅在动画值更改后应用（状态从“开”变为“关”等）所以当我切换主题时，我会显示一个“陈旧”的主题值，直到我还可以切换状态（开/关）。

任何帮助将不胜感激。

【问题讨论】：

我打开了沙箱，只是让你知道在我能够看到页面之前有一堆解析错误需要关闭。
感谢@stuartambient 的反馈！奇怪 - 刚刚尝试在隐身模式下运行链接，一切似乎都可以解析和渲染。你还在收到这些错误吗？如果是这样，你能更具体一点吗？
是的，这很奇怪，但现在加载正常。我来这里是为了寻找类似的东西。我正在关注这个线程，但我已经尝试了很多事情，现在认为变体不会更新组件的状态。希望我错了。

标签： javascript reactjs framer-motion

【解决方案1】：

是的，看起来很意外，也许这是一个错误。

不确定这是否适用于您的用例，但您现在可以做的是使用 React key 道具在主题更改后强制 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

【讨论】：

就我而言，我的动作涉及过渡持续时间。我这么说是因为如果我将 initial 设置为 false，组件会更新，但我会丢失持续时间。这就像一个开/关开关。然后，如果我在我的变体上将初始设置为关闭，则动画可以工作，但会回收整个动画（关闭到打开）。在这一点上两者都不漂亮。也许有些调整。最初我使用的是我的变体，但对于更改的属性，我在变体对象和组件 style={{}} 标记中都有它。它显示了承诺，但有一个我无法理解的小错误。
Danila - 使用键重新渲染运动 div 似乎是一种有效的解决方法，这实际上也是我最终在我的项目中使用的。不过还是觉得有点老套——所以我也reported this as a bug on github。也许我们会在那里获得更好的见解。暂时批准。谢谢。 @stuartambient