限制 animate.css 動畫只能出現一次

Question

我正在使用animate.css和react-on-screen npm 包， react-on-screen package 是使用TrackVisibility組件，所以我可以制作一個很好的淡入效果。 但我只希望 animation 完成一次。 但是每次當我滾動回組件並且它重新出現在屏幕上時，animation 都會被重新獲取，這並不是一個很好的 UI。 我應該怎么辦？

Answer 1

您可以將TrackVisibility組件的visible屬性與useState掛鈎結合使用，以跟蹤組件是否已設置動畫。 為組件設置動畫后，您可以使用animated道具關閉 animation。

import { useState } from 'react';
import { TrackVisibility } from 'react-on-screen';

function MyComponent() {
  const [animated, setAnimated] = useState(false);

  return (
    <TrackVisibility onVisible={() => setAnimated(true)}>
      <div className={`my-component ${animated ? '' : 'animated fadeIn'}`}>
        <!-- ... -->
      </div>
    </TrackVisibility>
  );
}

在此示例中，第一次出現MyComponent時， animated變量 state 設置為 false，並應用 animation。 但是當MyComponent滾出視圖然后又滾回視圖時， animated變量 state 已經設置為 true，因此不再應用 animation。

還值得注意的是，如果你只想制作一次 animation，你可以使用TrackVisibility組件的once屬性：

<TrackVisibility once>