防止动画向后显示 (Animate.css - React.js)

Question

我正在使用Animate.css 为滚动页面中的某些图像和按钮提供一些动画。不得不说我的项目是用React.js开发的，Animate.css是作为组件导入的。

Link to React library to animate on scroll

问题是我不知道如何显示我的动画一次（当用户向下滚动时）然后在用户想要向上滚动时停止它们（因为现在再次显示......）。

正如我在链接中提供的，要使用组件，你必须包装你想要动画的任何东西：

<ScrollAnimation animateIn="fadeIn">
  Some Text
</ScrollAnimation>

这个组件有很多有限的属性，比如animateIn，你可以在其中指定一个Animate.css中的动画来显示

其他属性是：

animateOut
duration - default 1
initiallyVisible - default false
delay - default 0

我尝试修改必须链接到项目的 animate.css.min，将 animation-iteration-count:infinite; 之类的值更改为 1，或将 animation-fill-mode:both; 更改为 forwards，但我没有成功...任何形式的帮助将不胜感激。

Answer 1

我终于找到了如何避免向后显示动画。在 GitHub 上的同一线程中，在问题部分中，有一个答案：

Github answer

我只需要制作我自己的 javascript 文档，复制并粘贴新的答案，一旦完成，就可以从我调用该组件的主页编辑路由。改为：

import ScrollAnimation from './scroll-animation';

scroll-animation 是我的 javascript 文档的名称。

最后一步是使用animateOnce添加的新功能：

<ScrollAnimation animateIn="slideInLeft" animateOnce="true">

然后，现在动画将仅在滚动时显示，而不是向后显示。