问题标签 [inview]

我有一张从 Api 获得的卡片列表。卡片是用户在上一个选项卡上选择的产品。当用户向下滚动页面时，它们应该被加载。一切正常。但是如果用户滚动到最后并更新页面表情卡就会出现。

因此，我有一个主要组件，它从本地存储（用户选择的产品）中获取密钥并将密钥逐个发送到另一个组件。这个组件检查，如果有这个key的卡是可见的，通过这个key向Api发出请求。如果我滚动到最后并更新页面，我会看到空卡片。此外，在网络中，我看到 Api 请求仅针对前四张卡。但不是最后四个。

这是主要组件，将密钥发送到另一个组件。

常量 productsKeys = JSON.parse(localStorage.getItem(storageKey) ?? "[]");

这是另一个发送 Api 请求的组件

尽管我设法使基本功能正常工作，但我的 JS/JQ 知识非常有限，我根据一些教程编写了这个并且它可以工作

html

现在它所做的基本上是当它从底部进入 VP 时从该部分中删除“.pre-ani”，并在它从底部离开 VP 时将其添加回来

我正在寻找但找不到方法是

• 当从底部进入 = 删除 .pre-ani
• 从顶部出来时 = 添加 .post-ani
• 当从顶部进入 = 删除 .post-ani
• 当从底部出来时 = 添加 pre-ani

我想在动画之前和动画之后切换一个类

除此之外，我希望它在每次进入或离开 VP 时影响页面上的所有部分，而无需为特定的部分 ID 编写代码

这有什么意义吗？如果不够清楚，我很乐意解释更多

我在使用array.map 为3 div 设置动画时遇到了一些问题。我想让每个 div 使用成帧器运动在视图中动画一次。

我遇到的问题是，当尝试使用 inView 单独为 div 设置动画时，成帧器运动会同时为所有 3 个设置动画。

如果我inView ref={ref}在父 Div 上设置，一旦第一个可见，所有 3 个将一起动画。

或者

如果我设置ref={ref}到 3 个映射的 div，所有 3 个将仅在第 3 个和最后一个 div 出现时动画。

我试图找到一种简洁的方法来单独动画到具有映射数据的视图 Div 中。

代码框链接供参考。