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

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 => () => {

  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>

  )

}