问题标签 [framer-motion]

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

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

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

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

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

任何帮助将不胜感激。

我在我的项目中使用 React Router，并且在“概述”页面上有一个专辑卡列表，在“专辑”页面上有相同的专辑卡列表。唯一的区别是专辑页面略宽。

当有人更改路线时，我希望卡片转换到新的位置/尺寸，所以我已经将我的路由器包裹起来<AnimateSharedLayout type="crossfade">并给每张卡片相同的layoutId.

现在，它可以工作了，但我有几个问题，想知道它们是否可以修复（我确定我只是忽略了一些明显的东西）。

我在这里整理了一个精简的示例：https ://codesandbox.io/s/framer-animatesharedlayout-5kdfr （如果您在“概述”和“相册”之间单击，它应该执行转换）。

• 为什么交叉淡化可能无法正常工作？相反，卡片会立即跳转到末尾组件（我猜它忽略crossfade了AnimateSharedLayout组件中的我并使用它来switch代替？为什么会那样做？）
• 有没有办法让卡片的内部组件以某种方式反向缩放？（类似于 Matt 在https://www.framer.com/blog/posts/magic-motion/的帖子中的“更正子组件” ）例如，您可以在过渡期间看到文本挤压，即使它的大小相同在开始和结束时。

谢谢！

在我的 React 网站上，我有一个我过去项目的屏幕截图的垂直列表，当页面第一次加载图像加载时，但在用户将鼠标悬停在它们之前只是一小部分。

一旦将鼠标悬停在图像上，就会展开到它们的全尺寸，然后就可以正常工作了。我希望防止用户将鼠标悬停在它们上方以使其正确加载。
该列表是从数组映射的

悬停和过渡效果由成帧器运动控制。

我查看了我的代码，并没有发现为什么图像只是部分加载。该网站可在此处查看网站 包含所有代码的 Github 存储库在此处Github （项目页面）
提前感谢您的专业知识。

我有如下代码：

有两件事没有发生

1. 退出动画未显示（我相信组件已卸载并且没有时间显示动画，我正在寻找解决该问题的方法）
2. 未onExitComplete触发。

如何解决这2个问题？

我有一个在悬停组件时更新的运动值。我认为 framer-motion 会自动处理将值设置为新状态的动画，但显然它没有。如何转换运动值的新值？同样重要的是要注意我知道存在的 whileHover 道具，但我不想在这里使用它。这个示例组件说明了我的情况：

嗨，我尝试在退出时对 2 条路线进行动画处理，从不透明度 1 到 0。但是由于某种原因，<Link>点击路线会改变（例如'/' => '/chat?name=bob&room=here'），但页面内容保持不变，并且不会呈现该特定路线的组件。一旦我使用浏览器中的“返回按钮”，动画效果也很好。

任何人都知道为什么不点击按钮？

应用程序.js

登录.js

聊天室.js

就像在标题中一样，我试图在单击按钮时多次为我的组件设置动画。目前，动画只运行一次，然后它就不再工作了，我怎么可能实现它

这是我正在尝试做的一个例子：

当 scrollTop 等于 500px 时，我想在位置固定的 div 上触发动画。有没有办法在成帧运动中做到这一点。我只找到当元素在视口中时提出的解决方案。但是我的 div 总是在视口中，因为它有一个固定的位置。我需要一个内置的滚动位置观察器。

沙盒

我遇到了成帧器运动的问题。我有带叠加的模态，我想叠加有一个淡入淡出的动画，但模态容器（他的子元素）有和缩放动画（从 1px 宽度和高度到 100vh 和 100vw）。我想防止以某种方式覆盖缩放，并通过动画改变他的不透明度。您对如何防止孩子观看父母的动画有任何想法吗？

我是 framer-motion 的初学者，很抱歉可能是糟糕的代码：D

我的代码：

父类：

免责声明：如果您有任何其他想法如何让它变得更好，请告诉我（我只有一个要求从打开模式的按钮进行模态容器缩放。我的意思是它从他的中心增长到固定位置）

感谢帮助

我正在做一个反应项目，并尝试在视图中设置动画并显示 div。我正在使用“react-intersection-observer”中的 useInView 挂钩来确定 div 是否在视图中，然后启动动画以使 div 可见。

但是，当我在同一个组件中有两个 div 时，这不起作用，即，只要第一个 div 在视图中 - 动画并显示第一个 div，并且当你在第二个 div 中进一步滚动时视图 - 动画并显示第二个 div。

任何帮助，将不胜感激。

这是代码：