问题标签 [react-intersection-observer]

在这段代码中，react-spring我得到了一个动画，其中每个字母都等到前一个动画结束，同时它正在被动画化

为什么会发生这种情况，我该如何解决？

我设法react-intersection-observer在功能组件中使用。但是，将它与类组件一起使用时我没有成功。我尝试按照文档进行操作，但出现以下错误：

Invariant failed: react-intersection-observer: No DOM node found. Make sure you forward "ref" to the root DOM element you want to observe.

我究竟做错了什么？先感谢您。

伪代码

• 当元素在视口中可见时触发动画。

代码框

我正在尝试为项目的水平滚动部分实现 POC。我在水平滚动部分上方有 3 个彼此相邻的 h3，这些 h3 应该对应于水平位中的各个子部分。

我正在使用 react-intersection-observer 创建子部分的引用，以便在用户单击其中一个 h3 时能够滚动到它们。状态设置正确，在 React Dev Tools 中，我可以看到 useInView 钩子设置正确，并将 s 显示为 refs。但是，当我尝试在任何地方访问 refOne.current 时，它会返回未定义。我在这里明确使用 useLayoutEffect 来等待所有 DOM 节点被完全绘制，但 refOne.current 仍然是未定义的。

我已经为此工作了几个小时，但我已经无能为力了。任何帮助深表感谢！

JSFiddle

代码：

附加useInView's ref（来自 的钩子react-intersection-observer）会导致组件不断重新渲染。为什么呢？

自己使用 IntersectionObserver 不会做这样的事情：

我编写了一个名为 component1 的组件，如下所示，它位于父组件内部。component1 位于页面底部，除非用户向下滚动到该区域，否则我不想呈现它。因此，我使用“react-intersection-observer”中的 InView 来确定该区域是否在视图中。如果是这样，则获取数据并渲染数据。但我收到警告：警告：无法从不同组件的函数体内更新组件。收到此警告的原因是什么？是不是因为我在组件中设置了setInView？

我遇到了 framer-motion AnimatePresence 组件的问题。我试图在组件在视口中可见后启动动画，为了实现这一点，我使用了 react-intersection-observer。它按预期用于开始动画，但退出动画中断，我不确定是什么导致了问题。我在https://codesandbox.io/s/holy-dream-rb5gu?file=/src/index.js创建了一个沙箱来重现此行为

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

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

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

当用户开始滚动时，我正在尝试使用交叉点观察者 API 有条件地在 CSS 网格中显示项目，但它似乎进入了无限渲染循环。这是我的代码。

这是我在 StackBlitz 上的实时代码的链接

另外，我要实现的目标是在可以避免的情况下不要在屏幕上渲染太多项目。我不确定是否display: none真的让浏览器工作得更少。如果这不是正确的方法，请告诉我。

感谢您阅读我的问题。非常感谢任何帮助。

我正在尝试使用帧运动和反应交叉观察者来设置一些基于滚动的动画。我想在滚动到视图时对同一页面上的不同部分使用相同的动画。我可以让 intersection-observer 与一些基本动画一起正常工作，但我不确定如何让它与 useTransform 一起工作。这是一个 CodeSandBox，它应该更好地解释我所追求的，以及我哪里出错了。任何帮助将不胜感激。

https://codesandbox.io/s/motionintersect-25wz9?file=/src/App.js:449-504

我有一个使用 'locomotive-scroll' 和 'react-intersection-observer' 的反应应用程序。该Installation组件具有“机车滚动”的水平滚动。我想观看 '.video-gallery' 和 '.video-box-wrapper' div 来做一些动画，因为它出现在屏幕上（通过分配不同的类名）。videoGalleryInView 正确观看“.video-gallery”并执行我想要的动画。但这不适用于 boxInView，它假设要观看所有的 '.video-box-wrapper' 节点。不仅所有“.video-box-wrapper”的动画同时发生，而且它似乎正在观看 videoGalleryRef 而不是 boxRef。下面是相关代码。任何帮助是极大的赞赏！