4

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

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

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

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

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

任何帮助将不胜感激。

4

1 回答 1

3

是的,似乎很意外,也许这是一个错误。

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

于 2020-09-25T15:14:13.990 回答