我正在开发一个 React 项目,在该项目中,当组件滚动查看时,我会在其中设置动画。我正在使用 Framer Motion。我怎样才能使动画仅在您第一次滚动组件时触发?
现在,如果我向下滚动页面,动画会按预期工作。但是,如果我刷新或离开页面并返回,动画将再次触发。滚动到页面中间,刷新,然后向上滚动将在之前滚动的组件上触发动画。
我知道这是 Framer Motion 在组件重新安装时从初始值变为动画值的默认行为。我希望在之前在用户视口中的组件上防止这种行为。
下面发布了其中一个组件的示例代码。任何帮助表示赞赏。
const Banner = ({ title, body, buttonStyle, buttonText, image, switchSide, link }) => {
const { ref, inView } = useInView({
threshold: .8
})
return (
<motion.div className="banner"
ref={ref}
initial={{ opacity: 0 }}
animate={ inView ? { opacity: 1 } : ''}
transition={{ duration: .75 }}
>
<div className={`container ${switchSide ? 'banner-switch': ''}`}>
<div className="side-a">
<img src={ image } />
</div>
<div className="side-b">
<h2>{ title }</h2>
<p>{ body }</p>
{
buttonText
? <Button buttonStyle={buttonStyle} link={link} justify="flex-start">{ buttonText }</Button>
: ''
}
</div>
</div>
</motion.div>
)
}
export default Banner