问题标签 [react-spring]

有点卡住试图弄清楚如何使用React Spring设置多个弹簧，然后弹簧将按链顺序进行动画处理。

这个想法是获取数组中每个路径的长度，这发生在useEffect. 当获取长度时，我想使用它们来设置单独的弹簧，这些弹簧共同构成 SVG 箭头的动画。

这是一个按预期工作的硬编码示例（单击视口中的任意位置，箭头将动画）

代码目前看起来像这样（代码沙箱）：

我正在编写一个反应应用程序，它充当向导来指导用户输入表单信息。该应用程序有一个标题部分，它说明用户在哪个步骤上，以及一个内容部分，它根据当前步骤呈现一个组件。我正在使用样式化组件，我现在唯一想做的就是拥有它，这样当组件切换（当前步骤状态发生变化）时，新组件会淡入而不是弹出。

我对 react 中的动画完全陌生，而且我看到的很多教程只为屏幕上的某个元素设置动画，而不是渲染时的组件转换。我正在使用 React-Spring 动画库并试图弄清楚我应该如何去做我需要的事情。如果有更容易使用的动画库，我愿意切换动画库。

这是我的应用组件

ModelStep 和 QueryStep 组件仅在其各自的步骤时呈现。

例如，这是我的 QueryStep 组件：

我所期望的是，当 ModelStep 向前导航并因此改变应用程序的 currentStep 状态时，QueryStep 会淡入，但是它只是正常切换到它而没有任何动画。

作为参考，我正在尝试遵循他们在 react-springs站点上的简单页面转换示例。

使用 react-spring 移动文本动画？

我正在开发一个使用 reactjs 作为前端的网站，在标题中我想自动将一些文本从右向左移动，但我想只用 react-spring 动画！谁能解决我的问题？

由于我是 react-spring 的新手，因此我找不到正确的解决方案！

我在我的标题中有两个按钮（主页，联系我们），并且我在同一页面上的一个 div 中有“主页和联系我们”的内容，当我点击主页或联系按钮时，它应该使用React滚动到那个特定的 div -路由器 由于我对这些概念不熟悉，我找不到正确的解决方案。

我用了react-router-dom和react-spring的useTransitions，为页面转场做动画，但是转场动画效果很好，但是也有一些bug。我想我可以用 CSS 解决它，但我不知道该怎么做。如果您知道如何解决它，如果您帮助我，我将非常感激。

我尝试使用 react-router-dom、react-spring、useTransitions、animated、__RouterContext 进行页面转换

没有错误信息。这是一些错误

它从底部上升到顶部。我只想在移动页面时处于中心并提供不透明效果。

我正在尝试使用 React Spring 为列表中项目的位置变化设置动画。

让一个项目淡入useSpring很简单：

但是，当我尝试使用时useSprings，出现错误：

https://codesandbox.io/s/wonderful-oskar-v04vw

/src/index.js：意外的令牌，预期的“，”

文档没有详细说明：https ://www.react-spring.io/docs/hooks/use-springs

我正在尝试使用每次用户在图像轮播中单击下一步时页面加载时最初使用的动画。

我试过使用类似这样的反应弹簧：

但是我得到“TypeError：无法读取未定义的属性'0'”

这在使用 useSpring （非复数）时有效：

单击下一步时，如何使动画从顶部淡入图像？

在此示例中，您可以看到由路由更改触发的页面之间的一些不错的过渡。（取自LevelUp Tutorials的 React Animation course，非常感谢 Scott Tolinski）。

现在我想让这些转换在两个方向上发生，具体取决于它转换到（和从）哪个页面，例如：

• 第一页 -> 第二页（两页从左到右过渡）
• 第三页 -> 第一页（两页从右到左过渡）
• ETC

从第一个示例中，我创建了这个示例，其中 的值x是动态的，应该根据转换的方向评估为100或。-100

我还没有从根本上理解它是如何useTransition()工作的，而且文档相当有限。这些例子看起来很神奇，但很难理解。

这个例子似乎与我试图实现的目标相似，但代码感觉就像黑魔法：y返回的每个对象的属性rows.map()似乎与y分配给的函数的值enter和update属性有关，因为如果我删除它我得到错误：Cannot read property 'replace' of undefined。这是如何运作的？

我正在添加基于以下示例的过渡动画：https ://1y3yyqpq7q.codesandbox.io/

在我的代码库中，当我按下跳过按钮时，会发生转换，并且会显示一个“新”纸质组件。

问题是在转换过程中 X 滚动条被激活，看起来不太好。您可以在示例 (URL) 中看到相同的行为。我尝试使用 overflowX: "hidden" 但它不起作用。

任何建议如何在过渡期间删除溢出-X？

谢谢

我尝试编写一个简单的反应弹簧来更改我的组件的边距，但它不起作用，div 只是以“from”样式呈现。