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

我在React中工作，我需要知道元素何时出现在屏幕上以播放淡入淡出动画，并使其出现在屏幕上。因为加载页面时始终播放动画，但如果必须滚动才能看到元素，则永远看不到动画：(

在这里，我可以做什么来仅在网格“AnimationContainer”或img“Animation1-1”/“Animation1-2”可见时播放它？

用于检测元素何时可见，并且仅在元素可见时设置

animation

属性。使用以下方法可以很容易地做到这一点：

从“react intersection observer”导入{useInView}
常量示例=>（）=>{
const[ref，inView]=useInView（{阈值：0.5}）
返回(
)
}

您忘记在网格（或img）标记上添加“ref={ref}”，但谢谢您！它解决了问题！@Octaviotastico哇，您说得对。为后代修复了此问题。：）

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

.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}
}

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>
  )
}