如何解决仅当元素在屏幕上时才播放动画
我正在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”的情况下,该怎么办?
解决方法
使用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>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。