问题标签 [framer-motion]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 使用 Framer-motion 悬停在父级时为子级设置动画
使用成帧器动作，当悬停在作为按钮的父元素上时，我想动画我的图标组件旋转 90 度。
我看到了变体的使用，但不确定如何真正将它们与whileHover.
任何帮助将不胜感激，因为这是一个新事物。
reactjs - 使用 Framer Motion 和 React 使用 motionValues 捕捉到位置 onDragEnd
我正在使用成帧器动作在我的项目中创建滑动交互。我正在努力做到这一点，以便当用户完成拖动孩子时，它会“快速”回到设定的位置。
我从文档中看到，您可以使用弹簧来为运动值设置动画：const y = useSpring(x, { damping: 10 })，但我想我做得不对？这是我的代码：
我期待当 dragEnd 事件发生时，孩子将动画到 x:200，但那没有发生。我是否错误地设置了值，或者可能是我如何将运动值应用于motion.div？
javascript - 使用拖动道具时，如何让 React Framer-motion 触发手机的 onClick 事件？
我目前正在使用 React 库 Framer Motion 来帮助为我的应用程序中的一些手势设置动画。我似乎对“motion.div”标签的“拖动”属性有问题。
例如<motion.div drag>
<button onClick={this.eventHandler}>Framer Motion Click me</button>
</motion.div>
我已经复制了我在这里遇到的问题：https ://codesandbox.io/embed/frosty-frog-xr2jj
onClick 在笔记本电脑/谷歌开发工具上工作得非常好，但是在使用移动/iOS 设备时，拖动属性似乎阻止了 onClick 事件。
如果您查看此沙箱，您可以看到这一点。该按钮在笔记本电脑/台式设备的沙盒中可以正常工作，但如果您在移动设备上尝试，您会遇到问题
这只是我做错了什么还是其他人遇到了这个错误？
任何帮助将不胜感激！
reactjs - 添加时如何修复“解析错误”React / Framer 运动中的元素
我启动了一个新的反应应用程序 [create-react-app] 并安装了 framer-motion。该应用程序按预期运行，直到添加一个成帧器运动元素：
相关错误：
javascript - 当元素在视图中时 Framer 运动动画（当您滚动到元素时）
当元素在视图中时（例如，当我们滚动到元素时），是否有任何内置方法可以使动画开始？
Framer Motion有安装动画部分，其中说：
当组件挂载时，如果它们与 style 或 initial 中定义的值不同，它将自动动画到 animate 中的值
所以我真的找不到一个直接的方法来让动画在它出现时开始。
但是，我现在看到的唯一选项是使用动画控件，这意味着我必须手动在滚动上实现一个侦听器并触发control.start()，非常感谢任何更简单的方法。
reactjs - 在 Framer Motion 中不起作用时的过渡
我在 React 项目中使用Framer Motion作为动画库。我正在尝试使用when属性在子元素之后为父元素设置动画。它不起作用，因为ContentVariants和ImgVariants正在同时运行。
如果我更改when: "afterChildren"为when: "beforeChildren"in ContentVariants，则没有任何区别。即使我删除when属性，动画也会同时运行。
reactjs - 如何在 Framer Motion 中正确拖动拖动手柄？
我想复制本教程（https://www.youtube.com/watch?v=UMGnYRJuJog），它展示了如何在 Framer X 中创建拖动手柄。使用framer-motion，我认为它有效，但我在拖动时获得了额外的空间不应该发生。可能有问题，display: flex但我不完全确定，是我做错了什么还是这是否是一个错误framer-motion.
CodeSandbox 复制
https://codesandbox.io/s/jolly-cerf-kh9o5
重现步骤
创建两个面板和一个拖动手柄，并使手柄向一个面板添加宽度并从另一个面板中减去。
预期行为
手柄应该拖动并且没有额外的空间。它也应该跟随它没有做的鼠标。
视频再现
环境细节
视窗 10、铬
reactjs - Framer：检查元素是否进入视口
在使用Framer Motion API在我的网站上创建交互和动画时，我找不到如何使用它来在屏幕上有内容时触发动画。
例如，这个 SVG 绘制正确，但 Framer 不会等待元素出现在视口上，而是在加载站点后立即触发它：
Framer 是否有要在此处实现的视口检测触发器？
javascript - Gatsby 构建/SSR 换出导致显示错误的组件
更新：以下已解决，但我遇到了类似的问题：
在我的图库模板中（对于示例页面，请参见此处，如果通过站点导航到，一切都会正常加载。刷新时，网格父 div（样式组件中的 GalleryGrid）被擦除/取消样式/替换为空白 div。这实际上发生在在盖茨比补水期间刷新。
我尝试用手动设置样式的常规 div 替换样式组件，但没有成功。不知道发生了什么！
我遇到了一个非常奇怪的错误！
我使用 Gatsby 构建了一个网站，从 Prismic.io 采购，并使用 styled-components 来设置样式。我使用 framer-motion 进行页面转换，并将我的布局组件添加到 gatsby-browser，以便仅转换页面内容，并向 gatsby-ssr 添加类似的代码以修复一些初始 ssr 错误。
现在发生的情况是，每当直接访问索引以外的页面时（试试这个），某些组件不会正确呈现。在此示例中，页面顶部的日期被替换为<Body>组件（其样式与预期<Date>组件不同），实际内容已被截断，仅显示第一个<p>.
如果您导航到“投资组合”部分，然后导航回目录页面，页面将正确显示 - 日期现在是一个<Date>组件并显示整个正文文本。
'essay' 节点也会发生类似的错误 - 例如，在此页面上，图像本应位于一个被调用的组件中，但在刷新或直接访问（而不是通过站点导航导航到该页面）时ImageContainer被一个额外的组件替换。EssayContainer
老实说，我不知道这里发生了什么或可能导致此错误的原因 - 无论是我做错了什么还是这是 Gatsby 的 SSR 或 styled-components/gatsby SC 插件中的错误。它在运行时按预期工作gatsby develop，因此必须是构建或 SSR 中的某些内容。
我的盖茨比浏览器：
还有我的 gatsby-ssr：
我的回购在这里。
任何帮助是极大的赞赏！