![](/img/trans.png)
[英]Framer Motion AnimatePresence doesn't execute when changing routes
[英]Framer Motion - stale custom value - changing the custom value doesn't trigger an update
使用framer-motion ,我有一个问题,即更新我通过custom
道具传递给motion.div
变体的对象不会触发预期的样式更改。
我创建了以下沙箱以演示该问题:
https://codesandbox.io/s/framer-motion-stale-custom-fibp5?file=/src/App.js
我的期望是,当我切换主题时 - 圆圈的开/关颜色会根据新主题立即改变。 (从黑色/白色到深蓝色/黄色,反之亦然)。
但是,主题更改仅在动画值更改后应用(状态从“打开”更改为“关闭”等)因此,当我切换主题时,我会显示“陈旧”主题值,直到我也切换状态(开/关)。
任何帮助将不胜感激。
是的,似乎很意外,也许这是一个错误。
不确定这是否适用于您的用例,但您现在可以做的是使用 React key
prop 强制在主题更改后重新渲染motion.div
。 像那样:
<motion.div
key={theme}
style={styles.circle}
variants={VARIANTS}
animate={status}
initial={false}
custom={theme}
/>
请注意,我还设置了initial={false}
,否则如果您真的在on
动画将从off
状态事件开始。
Codesandbox: https ://codesandbox.io/s/httpsstackoverflowcomquestions64027738-cwj9k ? file =/ src/App.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.