防止動畫向后顯示（Animate.css-React.js）

Question

我正在使用Animate.css為頁面上的某些圖像和按鈕提供一些動畫。 我不得不說我的項目是使用React.js開發的，並且Animate.css是作為組件導入的。

鏈接到React庫以滾動顯示動畫

問題是我不知道如何一次顯示我的動畫（當用戶向下滾動時），然后如果用戶想要向上動畫，則停止它們（因為現在再次顯示...）。

正如我在鏈接中提供的那樣，要使用組件，您必須包裝任何要設置動畫的內容：

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

該組件具有許多受限制的屬性，例如animateIn ，您可以在其中指定要顯示的Animate.css中的動畫。

Oher屬性是：

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答案

我只需要制作自己的javascript文檔，復制並粘貼新答案即可，一旦完成，就可以從調用組件的主頁上編輯路由。 它更改為：

import ScrollAnimation from './scroll-animation';

其中scroll-animation是我的javascript文檔的名稱。

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

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

隨您去，現在動畫將僅滾動顯示，而不向后顯示。