问题标签 [react-spring]

我在网页上使用 React Spring for Parallax，但是页面上较高的组件之一<Section2 />使用 flexbox 强制 4 个大的水平图标在较小的屏幕上呈现为 2 x 2 图标。

<Section3>发生这种情况时，它会导致移动视图中的偏移值错误。所以我的问题是如何通过媒体查询或其他方式更改偏移值。

这是我的代码：

非常感谢

如何使用 useSpring() 钩子？

我正在尝试使用 useSpring() 钩子为变换属性设置动画：

如果初始状态是 ，它根本就不起作用"translate3d(0,0,0)"，例如，如果我用 be 初始化toggle它false：

另一方面，这有效：

这是一个错误吗？谢谢

我确信这与我不完全了解 React Spring 的工作原理或 HOC 的原理有关。

我正在尝试为 React 创建一个添加 React Spring 动画的 HOC（从左侧滑入子组件）

然后，在另一个组件中，我有这个：

我认为这会起作用，但我得到了错误：

我发现这个页面建议将其更改为 const 道具：

https://github.com/react-spring/react-spring/issues/616

但是，当我这样做时，我得到了错误：

所以我不太确定如何让 HOC 与 React Spring 一起工作。

任何信息都会很有启发性。

我已经阅读了整个react-spring文档，似乎没有明确的方法来做到这一点。

我的尝试：

我正在使用 ref 和 hooks 进行尝试。

附加到滚动目的地，useRef以便从网站的天花板上找到它的偏移顶部。

我使用useState在单击状态之间切换以触发滚动。

我useSpring用来触发从 0 到滚动目标的滚动顶部的动画getBoundingClientRect().top。

任何人都可以帮助解决这个问题吗？

网上没有太多解释，谢谢！

我的 react-spring svg 动画在 Safari 中不起作用

我正在使用 react 钩子和 react-spring 动画库，我的代码在 Chrome 和 Firefox 中有效，但在 Safari 中无效。

strokeDashoffset 值应该是动画，但它没有。useCallback 块中控制台的日志显示，当使用 getTotalLength() 测量 DOM 节点时，与 Chrome 和 Firefox 不同，Safari 中的值最初为 0，但返回正确的值当组件卸载时。

我正在使用react-spring为用户选择的项目创建“附加信息”框的动画。遵循文档中的简单过渡演示。我为我的用例想出了一个版本：

CodeSandbox.io 中的示例

在示例中，单击Select模拟单击随机项目并Clear模拟不选择任何项目。当您单击时Select，Clear它的行为符合我的预期。

我要解决的问题是，当您按Select两次时，第二个项目进入并移向第一个，但在最终位置附近停止并在最后向前猛拉。从其他堆栈溢出答案看来，第一个 div 的某些方面仍在呈现。我的假设是这是我如何布局 CSS 的问题，但我无法弄清楚我应该做些什么不同的事情：

我已经尝试了几次迭代，无论是否使用 flex，但问题是完全相同的。谁能告诉我在这个例子中做错了什么？

我是 react-spring 的新手。每当卸载组件时，我都无法为其设置动画。我有一个带有 onClick 处理程序的简单卡片，它负责有条件地显示我的 Overlay 组件。安装时动画效果很好（从 & 进入作品），但是当关闭覆盖时，组件只是消失而没有动画（离开不起作用）。我怀疑这是因为组件的条件渲染，但我一直在努力寻找解决方案的几个小时。任何帮助，将不胜感激！

我当前的代码： https ://codesandbox.io/s/dry-leftpad-h3vmv
我想要实现的目标： https ://codesandbox.io/s/048079xzw

PS 后者使用的是 mauerwerk 的 lib。我不想用那个。

当组件安装时，我有一个 react-spring 过渡。我希望它在输入完成后等待“x”秒，然后翻转显示状态以便它可以开始离开。

我已经开始使用 react-spring 并且我很喜欢这个概念，但我正在努力解决如何构建我想要的动画。

我想让一个 div 向右移动，然后回到开始，然后向右，但不是那么远，回到开始，向右，但不是那么远，最后回到开始。就像一个弹簧，它被拉动，当释放时，它又回到了它的静止位置。

我可以从文档中看到如何调整弹簧的感觉以及如何触发动画，但我之前从未制作过动画，所以知道要更改哪些属性以及如何使其正确循环是我正在寻求帮助的内容.

编辑：到目前为止，我有这个动画，它有效，但感觉非常脱节。

目前明明是三个动作，我可以减少动作之间的延迟，让它看起来像一个动作吗？

边距是最好的 CSS 属性吗？

我正在使用react-use-gesture包在拖动事件上移动 div，但需要设置边界。

我是否需要使用 spring 中的 interpolate 方法来设置这些边界，还是应该向该useSpring().set方法添加参数？

没有速度，没问题，但我需要useSpring().set方法上的速度参数

沙盒