防止动画向后显示（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

Oher属性是：

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

我试图修改animate.css.min医管局s被链接到该项目，更改值如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"> 

而且你去那里，现在的动画将只显示在滚动，而不是倒退。