reactjs - React.Js + Framer Motion 仅在初始页面加载时动画

Question

我正在开发一个 React 项目，在该项目中，当组件滚动查看时，我会在其中设置动画。我正在使用 Framer Motion。我怎样才能使动画仅在您第一次滚动组件时触发？
现在，如果我向下滚动页面，动画会按预期工作。但是，如果我刷新或离开页面并返回，动画将再次触发。滚动到页面中间，刷新，然后向上滚动将在之前滚动的组件上触发动画。
我知道这是 Framer Motion 在组件重新安装时从初始值变为动画值的默认行为。我希望在之前在用户视口(viewport)中的组件上防止这种行为。
下面发布了其中一个组件的示例代码。任何帮助表示赞赏。

const Banner = ({ title, body, buttonStyle, buttonText, image, switchSide, link }) => {
  const { ref, inView } = useInView({
    threshold: .8
  })
  return (
    <motion.div className="banner" 
      ref={ref}
      initial={{  opacity: 0 }}
      animate={ inView ? {  opacity: 1 } : ''}
      transition={{ duration: .75 }}
    >
      <div className={`container ${switchSide ? 'banner-switch': ''}`}>
        <div className="side-a">
          <img src={ image } />
        </div>
        <div className="side-b">
          <h2>{ title }</h2>
          <p>{ body }</p>
          {
            buttonText
              ? <Button buttonStyle={buttonStyle} link={link} justify="flex-start">{ buttonText }</Button>
              : ''
          }
        </div>
      </div>
    </motion.div>
  )
}
export default Banner

Answer 1

我最近遇到了类似的问题。我正在实现介绍动画并且不希望它在每次页面刷新时触发，所以我制作了一个自定义 Hook ，它将时间戳保存在本地存储中，并且在每次页面刷新时将保存的时间与存储的时间戳进行比较，并在时间过去时触发在那里存储一个新值。如果你只想玩一次，你可以简单地实现自定义我的代码来存储 bool 值，你就可以开始了。
我的自定义钩子(Hook)

import {useEffect} from 'react';

const useIntro = () => {

const storage = window.localStorage;
const currTimestamp = Date.now();
const timestamp = JSON.parse(storage.getItem('timestamp') || '1000');

const timeLimit = 3 * 60 * 60 * 1000; // 3 hours

const hasTimePassed = currTimestamp - timestamp > timeLimit;

useEffect(() => {
    hasTimePassed ? 
        storage.setItem('timestamp', currTimestamp.toString()) 
        : 
        storage.setItem('timestamp', timestamp.toString());
}, []);

return hasTimePassed;
};

export default useIntro;

您需要在代码中进行这个简单的更改

const Banner = ({ title, body, buttonStyle, buttonText, image, switchSide, link }) => {
    const showAnimation = useIntro();


  const { ref, inView } = useInView({
    threshold: .8
  })
  return (
    <motion.div className="banner" 
      ref={ref}
      initial={{  opacity: 0 }}
      animate={ inView && showAnimation ? {  opacity: 1 } : ''}
      transition={{ duration: .75 }}
    >
      <div className={`container ${switchSide ? 'banner-switch': ''}`}>
        <div className="side-a">
          <img src={ image } />
        </div>
        <div className="side-b">
          <h2>{ title }</h2>
          <p>{ body }</p>
          {
            buttonText
              ? <Button buttonStyle={buttonStyle} link={link} justify="flex-start">{ buttonText }</Button>
              : ''
          }
        </div>
      </div>
    </motion.div>
  )
}
export default Banner

希望这就是你所追求的。