防止動畫向後顯示（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"> 

而且你去那裏，現在的動畫將只顯示在滾動，而不是倒退。