如何防止关键帧动画在再次滚动时重新启动？

Question

我有一个react页面，它的主要部分在视口中的可见性是由一个交叉点观察者观察的。一旦该部分对用户可见，就会触发一个关键帧(通常是从0到1的基本不透明度过渡)。

问题是，每次我向上/向下滚动时，关键帧都会重新开始，从用户体验的角度来看，这是很烦人的。如何防止关键帧动画在发生后再次触发？

下面是一个代码片段：

​

import { useInView } from "react-intersection-observer";

const reveal = keyframes`
  0% {opacity: 0;}
  100% {opacity: 1;}
`;

const Section = styled.section`
  margin: 64px 0;
`;

const SectionTitle = styled.h3<{ inView: boolean }>`
  opacity: 0;
  animation: ${({ inView }) =>
    inView &&
    css`
      ${reveal} 1s ease forwards
    `};
`;

const Text = styled.p<{ inView: boolean }>`
  opacity: 0;
  animation: ${({ inView }) =>
    inView &&
    css`
      ${reveal} 1.5s ease forwards
    `};
`;


export default function Home() {
  const [about, aboutInView] = useInView();
  const [pricing, pricingInView] = useInView();
  return (
    <div>
      <Header />
        <Section ref={about}>
              <SectionTitle inView={aboutInView}>About</SectionTitle>
              <Text inView={aboutInView}>about text</Text>
        </Section>
        <Section ref={pricing}>
          <Text inView={pricingInView}>pricing text</Text>
        </Section>
    </div>
  );
}

​

Answer 1

调用useInView钩子时设置{triggerOnce: true}

// Generally 
const [ref, inView, entry] = useInView({ threshold: 0, triggerOnce: true });

// Your Case
const [about, aboutInView] = useInView({ triggerOnce: true });