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

Question

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

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

这是一个代码sn-p：

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 Hook 时设置 {triggerOnce: true}

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

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