成帧器运动-过时的自定义值-更改自定义值不会触发更新

编程问答 2022-06-12

问题描述

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

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

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

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

但是，主题更改仅在动画值更改后才应用（状态从“开”更改为“关”等）。因此，当我切换主题时，我将显示“陈旧”的主题值，直到我还可以切换状态（打开/关闭）。

任何帮助将不胜感激。

解决方法

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

不确定这是否适用于您的用例，但是您现在可以做的是使用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/httpsstackoverflowcomquestions64027738-cwj9k?file=/src/App.js

framer-motionjavascriptreactjsreactjs