问题标签 [react-spring]

当点击按钮 {aa} 时，如何通过 react-spring 隐藏来为 div 制作动画？

https://codesandbox.io/s/silly-feistel-j1snp

我有 3 个组件。其中 2 个并行运行动画。第三必须只有在两个组件完成动画后才能一致地运行动画。如何使用 react-spring 实现这一目标？

我正在尝试使用react-spring在我的网站上创建视差效果。我希望视差容器成为整个站点的背景，并在底部加上一个 100vh 的“页脚”。这是我的意思的简单图表：

我的问题是，根据react-spring parallax docs，视差容器需要一个pages属性，该属性“确定每个页面占用 100% 可见容器的内部内容的总空间”。

根据我对这一点的理解以及我的测试，这意味着我必须根据 100% 视口高度的划分明确设置视差容器的整个高度。这意味着我不能只让视差容器包含我的网站的内容，它没有预设高度，更不用说高度除以 100vh。

所以我的问题是，我可以让 Parallax Containerreact-spring完全包含我整个网站的内容，再加上底部的 100vh 吗？

这是我的问题的沙盒演示，pages在第 29 行设置了 Parallax 属性：https ://codesandbox.io/embed/react-spring-pageheight-question-c12er

我有一个创建反应应用程序，它通过自定义 cra 使用共享模块，我试图在这个公共模块中使用反应弹簧。

不幸的是，我收到了可怕的 Invalid Hook Call 通知：

从我拥有的通用组件中

从我的应用程序中：

我相信“重复”意味着我们没有从 react-video-js-player 中错误指定的依赖项中得到重复的反应，但也许我错了？

我已经检查了钩子的规则，我认为这个非常简单的组件并没有违反它们：

我们的 config-overides.js 执行以下操作以从 create-react-app 访问这个公共组件，我看不出它会如何从中获取一个 react 版本。

我难住了。有什么建议么？提前致谢。

我正在尝试在打字稿https://codesandbox.io/s/viewpager-sq9ud中使用这个拖动动画

我被困在这条线上：

它给了我这个错误：

没有重载匹配此调用。重载 1 of 2, '(ds: Partial> | undefined; onRest?(ds: Partial>): void; }>>): void'，给出以下错误。'(i: any) => { display: string; 类型的值 x?：未定义；} | { x：数字；显示：字符串；}' 与类型 'Partial> 没有共同的属性 不明确的; onRest?(ds: Partial>): 无效；}>>'。你的意思是叫它吗？重载 2 of 2, '(i: number): Partial> | 不明确的; onRest?(ds: Partial>): 无效；}>>'，给出以下错误。'(i: any) => { display: string; 类型的参数 x?：未定义；} | { x：数字；显示：字符串；}' 不可分配给“数字”类型的参数。ts(2769) Carousel.tsx(127, 11)：您是要调用此表达式吗？

这个 set 函数在打字稿中应该如何看待？

谢谢！

我正在尝试更改默认淡入和淡出过渡的速度，但文档似乎没有提到如何这样做：

鉴于此代码，我将如何使淡入/淡出动画更快或更慢？

我尝试这样做（如下），但它最终完全打破了过渡。动画不再起作用：

有任何想法吗？

我想对我的英雄部分的背景图像应用视差效果，就像在这个动画中一样：https ://dribbble.com/shots/7135284-homepage-for-aa-Saas-company-bubblz 。

我将整个部分包裹在一个 Parallax 组件中，并将 ParallaxLayer 放在我的图像标签周围。

问题是该部分根本不显示。

我尝试将 Layer 组件放在父组件之外，但结果是一样的。

感谢您的帮助！

当我用反应弹簧点击它时，我想更改图标。例如，当我点击“”时，它会变成“”。在 react spring 的文档中，可以使用过渡道具来实现，但是如何使用 onClick 切换它？

https://www.react-spring.io/docs/props/transition

以下代码由 react spring 提供

我正在使用反应弹簧在组件安装后 500 毫秒为窗口滚动设置动画。如果滚动动画和用户的滚动同时发生，就会出现问题。我让它在开始动画之前检查页面滚动是否为 0，但这只有在用户在 500 毫秒触发之前滚动时才能解决。

这是代码：

我还尝试将停止函数解构并在内部使用它，onFrame但它似乎不起作用：

const [, setY, stop] = useSpring(() => ({ y: window.innerHeight * 0.05 }))

还会window.scroll()触发scroll事件，因此我无法区分脚本滚动和用户滚动。

关于如何解决这个问题的任何想法？

提前致谢！

我react-spring用来创建一个简单的画廊动画。我希望图像从右侧出现并以平滑的过渡向左侧离开。但是，我似乎无法摆脱此处所示的生涩动作。

代码如下：