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

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

1 个答案: