问题标签 [framer-motion]

我正在尝试使用 Framer Motion 来使用 AnimatePresence 为路线设置动画，并且由于某种原因，我试图通过每条路线填充信息的上下文（通过表单收集个人信息作为注册步骤）在一条路线退出时不会持续存在并且通过 AnimatePresence 加载另一个。我不确定为什么会这样。每次加载新路线时，我是否应该将状态作为道具传递？

我已经为每条路线的每个组件添加了初始、动画和退出转换。一旦一个组件退出并加载其他组件，存储在上下文中的状态就会被重置。

这里也location来自const location = useLocation()于react-router-dom

我正在构建一个单页电子商务应用程序。产品页面基于响应式网格中的卡片。我想制作一张卡片以使用类似动画或动画的方式扩展onClick到全屏以查看完整的产品页面。springease

问题是卡片被绑在网格上，并不总是在中心。从动画的角度来看，我尝试用 css 动画做的所有事情都看起来很糟糕，从代码的角度来看，感觉就像一辆自行车。

我只是想问一下，简而言之，实现这一目标的最佳方法是什么，我应该选择什么路径？我现在拥有的网格真的有可能吗，还是我应该尝试一些不同的东西？我想Framer Motion用作动画库。

在这里您可以看到类似于我想要实现的目标：https ://youtu.be/XyBbFMhMtik?t=10

这是我现在拥有的简化代码框：https : //codesandbox.io/s/dank-water-o2lpp

我正在构建一个Trello替代方案，您可以在其中创建列表和任务。应该可以通过拖动元素来重新排序列表（水平）和列表中的任务（垂直）。

拖动列表时遇到问题，该列表中的任务未跟随父级：

我一直试图弄清楚拖动传播在什么情况下不起作用，并制作了这个代码框：

我认为我在这个简单的代码框示例中面临的问题可能与我的 Trello 替代应用程序中的问题相同。如果您取消注释onDragStartandonDragEnd行（它只是存储一个“拖动状态”布尔值，实际上没有将它用于任何事情），那么所有子框在其中一个被移动后停止跟随父拖动。

所以我的问题是：

如何使子组件可拖动，同时在拖动父容器时保留原始行为？如果可能的话，为什么会发生这种情况？

我尝试将dragPropogation道具添加到父级，但没有成功。

请注意，我使用的是最新发布的 Framer Motion 版本 2！ 我可以在版本 1.* 中很好地完成这项工作，但即使在那里我也偶然发现了一些问题，这让我想尝试在版本 2 中是否更容易

在 vanilla Javascript 中有相对简单的方法可以实现这一点（请参阅this for a这样的方法），但我正在努力让这样的东西在 React 中工作，特别是使用像 Framer Motion 这样的动画库。

Framer Motion 的useViewPortScroll返回一个方便的 scrollYProgress 对象，其“current”属性告诉您用户当前滚动页面的百分比。

我想使用这个属性来做这样的事情：const pts = path.getPointAtLength(scrollPercentage * pathLength);，然后使用pts.xandpts.y作为圆形 SVG 的 x 和 y 属性 - 所以每次我向下（或向上）滚动页面时， circle 将沿 SVG 路径更新/动画。

我正在努力让它与 React 更具声明性的风格一起使用，因为我必须对 circle 和 path 元素使用 refs，这意味着我必须将上述pts = path.getPointAtLength...代码放在useEffect 调用中，两个 refs 为依赖项（否则 refs 将是未定义的，在这种情况下，我的圆形 SVG 的 x 和 y 上的pts.x和pts.y属性在第一次渲染时将无法访问。

有没有人解决过类似的问题或可能提供指导？

我对AnimatePresence用于页面转换的 , 有疑问。一切正常，除了当我加载一些页面（不是所有页面）时，页面的内容不显示，即使正确推送了 url，我必须手动重新加载页面才能看到内容。这是我的_app.js：

这里是使用动态路由和静态方法创建的页面：

注意：有些页面可以正常工作，有些页面需要重新加载才能显示内容，加载时动画启动没有问题。我不知道这是否重要，但我正在使用 GraphQL 获取数据

我在使用 Framer Motion 库时遇到问题，尤其是 AnimatePresence 过渡。我可以让它在正常情况下工作，但是当我将我的 Routes 包装在自定义实现中时，我无法让退出动画工作。

当我导航到不同的路线时，我确认在组件上使用 useEffect 挂钩正在卸载，但退出动画不是由父级 AnimatePresence 触发的。

任何帮助将不胜感激。

这是我的代码：

应用程序.ts

动画路线：

安装过渡：

我试图在使用 Framer Motion 时淡出另一个 div 时在同一空间中淡出一个 div。即使过渡有延迟，对象本身也会立即渲染，这会导致同一空间中的另一个对象跳来跳去。

这是我正在尝试做的一个小代码示例：

基本上占用的空间SOME DIFFERENT TEXT立即出现，将切换按钮向右推，然后按一次TEXT就消失了。然后SOME DIFFERENT TEXT在单击按钮后立即再次向右推出。

我怎样才能让两个项目占据相同的空间，以便它们无缝过渡到彼此？

我有一个场景，容器在滚动期间将其位置从固定更改为相对。我使用 framer-motion 在位置转换期间提供平滑的效果。framer-motion 是一个很好的库来处理这些场景，但是我的代码在所有浏览器中都没有按预期工作。当我滚动到位置从固定变为相对的偏移量时，它会跳跃并坐在那个地方，正如我所期望的那样，它应该是平滑的。

现在已经一个多星期了，我无法让它工作！，我正在尝试在反应页面组件之间进行转换，让它在每个页面上上下滚动。但是，在退出页面上，第二页需要显示时间更长，我不知道如何同步它，所以当第一页上升时，第二页也同时开始上升。

我正在使用AnimatePresence和exitBeforeEnter包装应用程序组件。感谢对正确方向的任何帮助。

以下是我对每个组件的变体

framer-motion使用代理，但导入后proxy-polyfill，motion.div从“framer-motion”导出的仍然未定义。

我怎样才能使它与 ios 9 一起工作？