アニメーションが後方に表示されないようにする（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など限定されたプロパティの数を持っています

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

私はそのヘクタールanimate.css.minを変更しようとしました：

Oherプロパティがあり、表示するAnimate.cssからアニメーションを指定することができますプロジェクトにリンクするには、animation-iteration-count:infinite;から1、またはanimation-fill-mode:both;からforwardsに値を変更してください。しかし、私は失敗しました...どんな種類の助けにも感謝します。

Answer 1

最後に、アニメーションを後方に表示しないようにする方法を見つけました。 GitHubの上の同じスレッドでは、問題のセクションでは、そのための答えがありました：

Github answer

私は、私自身のjavascript文書を作る新しい答えをコピーして貼り付け、それがあった後にしなければなりませんでした私がそのコンポーネントを呼び出していた私のメインページからルートを編集する。

scroll-animationは私のjavascriptのドキュメントの名前です

import ScrollAnimation from './scroll-animation'; 

：それはに変更されました。

最後のステップはanimateOnceを追加された新しい機能を使用することでした。今、アニメーションが逆方向にのみスクロールに表示されなくなり、あなたが行く

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

そして、そこを。