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

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}

}

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

Answer 1

使用Intersection Observer检测元素何时可见，并且仅animation在可见时设置属性。使用react-intersection-observer很容易做到这一点：import { useInView } from "react-intersection-observer"const Example => () => {&nbsp; const [ref, inView] = useInView({ threshold: 0.5 })&nbsp; return (&nbsp; &nbsp; <Grid ref={ref} container className="AnimationContainer">&nbsp; &nbsp; &nbsp; <img src="/images/animation1/circle.svg" className={inView ? "Animation1-1" : null} />&nbsp; &nbsp; &nbsp; <img src="/images/animation1/calculator.svg" className={inView ? "Animation1-2" : null} />&nbsp; &nbsp; </Grid>&nbsp; )}