问题标签 [framer-motion]

我正在尝试使用 framer-motion 和 Next js 来创建淡入淡出效果，但它永远不会淡出。我知道AnimatePresence allows components to animate out when they're removed from the React tree.这可能是我的问题，但我不知道反应不够好，不知道如何修复我的结构。谁能推荐一种让它消失的方法？这里有一些页面...

_app.js

一些简单的页面

我想从右边稍微淡入 div 几秒钟后淡出这个 div

在 gsap 中，这段代码看起来像这样

如何在成帧器运动中做到这一点？

我在一家 IT 公司工作，我需要创建一个包含整个页面的滚动动画的产品，相同的布局每次都在变化，其他组件到处都在变形为另一种形状和大小，目前我正在使用 framer 中的 useViewPortScroll来自纯 JavaScript 的 motion 和 intersectionObserver API，

但问题是，当我在页面之间添加新页面时，整个事情都搞砸了？有什么方法可以根据页面或百分比值映射 scrollYProgress ，这对我来说是救命稻草？

请给我一个很好的解决方案。提前致谢。

处理具有两个子项的“Gallery”组件，“GalleryImage”当变量“inView”为真时通过 Framer-Motion 进行动画处理，该变量由 react-intersection 观察者的“useInView”提供。我的问题是这些图像需要基于窗口宽度（由变量“视口”表示）完全不同的动画/初始样式，但是如果页面以“桌面”大小加载并且图像动画某种变换，但是窗口被调整为“移动”，其中图像根本不需要转换，之前动画（或初始状态）的样式仍然存在。如何让这些内联样式在重新渲染时清除？

回购：https ://github.com/qcaodigital/cocktail_curations.git

----过渡文件-----

我有一个正在使用 Framer Motion 构建的应用程序，并且每当有人向左或向右页面滑动时，我都会尝试禁用垂直滑动。我注意到有“滞后尖峰”或“冻结”，并且滑动不顺畅。当您向左/向右滑动时，它会滑动到某个点，暂停片刻，然后继续。这就像小冻结，我已经确定是这种情况，因为我使用onChangePage切换drag父页面的值。当我将其注释掉时，不再冻结。

演示：https ://codesandbox.io/s/framer-motion-pages-shmd9

要复制这一点，请向左/向右快速滑动。任何向上/向下运动都不会发生冻结，因为没有任何变化被触发，只有左/右运动。当该onChangePage部分被注释掉时，左/右运动也不会发生冻结。非常感谢任何帮助，谢谢。

编辑：我知道这是由于重新渲染而发生的-但我希望能够在向左/向右滑动时禁用垂直滚动功能，而不会发生重新渲染冻结。

在父组件中为嵌套路由设置动画时遇到了这个问题，父组件将被卸载并再次安装，并且动画重新启动我需要阻止父组件的重新渲染这里是我在 codesanbox 中的代码。祝大家编码愉快 新链接代码沙盒

嵌套组件是这样的，每次当我单击一个路由时，组件将卸载并再次安装，并且嵌套组件的动画重复我希望我的嵌套永远不会再重新渲染，当我的路由像 /ComponentWithNestedRoute/:nested 它只是重新渲染并重新启动动画的子组件

希望这很清楚。再次快乐编码

所以我开始在 React 中使用 Framer Motion，它真的很棒。

我可以使用初始/动画/退出创建动作，但由于某种原因我无法让变体工作？所以我有这个例子：

如果我刷新页面（AnimatePresence 初始值为真，而不是假），它会起作用，我会得到一个从 y:300 移动到 y:0 的字母，并带有定义的过渡。

但是，如果我想将其应用于多个字母，请将其转换为如下变体：

然后像这样使用它：

它只是行不通吗？我在这里错过了什么吗？我没有定义任何其他动作/父母或任何东西。它在使用内联代码时有效，但不适用于变体？

使用变体时，字母不会刷新/页面更改？

感谢您抽出宝贵的时间！

我正在尝试使用具有可拖动 div 的 Framer Motion 设置组件，但拖动目标（可拖动元素）是可拖动父 div 的子级。与操作系统窗口类似，只能由顶部菜单栏拖动。我摆弄了dragControls，但我不知道这是否是我的答案。如果我将 motion.div 设置为子 div，则只有它会移动。

我正在尝试使用 Framer API 来实现水平滚动组件https://www.framer.com/api/scroll/根据文档，有一个方向属性可用于设置滚动方向。

这是我的简单代码：

我注意到这段代码（在浏览器中检查后）垂直堆叠帧，因此水平滚动仅适用于第一帧。我确实尝试使用 position:absolute 为每个帧设置 css，它将帧彼此水平放置...但是 Scroll 组件不会滚动 - 每次我尝试滚动时它都会弹回开始）

有没有人让这个工作？非常感谢您的帮助！

我有一段代码有 2 个变体来帮助动画：

这反映在代码中：

然而，孩子们不会一下子踉踉跄跄地动起来。如何使用 svg 线条实现惊人的孩子？

示例代码可以在这里找到