仅当元素在屏幕上时如何播放动画

Question

我正在使用 React，我需要知道元素何时在屏幕上播放淡入淡出动画，并使其出现在屏幕上。因为动画总是在页面加载时播放，但是如果您必须滚动才能看到元素，那么您将永远看不到动画:(

<Grid container className="AnimationContainer">
  <img src="/images/animation1/circle.svg" className="Animation1-1" />
  <img src="/images/animation1/calculator.svg" className="Animation1-2" />
</Grid>

在我的 CSS 文件中，我有：

.AnimationContainer {
  place-content: center;
  height: 200px;
  width: 100%;
}
.Animation1-1 {
  animation: fading 2s;
}
.Animation1-2 {
  animation: fading 1.2s;
}
@keyframes fading{
  0%{opacity:0}
  100%{opacity:1}
}

只有在 Grid "AnimationContainer" 或 img "Animation1-1"/"Animation1-2" 可见时，我可以在此处执行什么操作？

Answer 1

使用Intersection Observer 来检测元素何时可见，并且仅在可见时设置animation 属性。使用react-intersection-observer 很容易做到这一点：

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

const Example => () => {
  const [ref, inView] = useInView({ threshold: 0.5 })

  return (
    <Grid ref={ref} container className="AnimationContainer">
      <img src="/images/animation1/circle.svg" className={inView ? "Animation1-1" : null} />
      <img src="/images/animation1/calculator.svg" className={inView ? "Animation1-2" : null} />
    </Grid>
  )
}