问题描述
我正在尝试向我的gatsby网站添加滚动动画。我使用的插件sal应该在元素进入视图时和/或元素离开时能够支持动画。我正在尝试在元素中添加滑入式动画，但是确定如何使它起作用。当我尝试查询元素时，它显示为null。任何人都知道如何使它工作。
p.s。一切都已在gatsby config中正确设置，我可以使动画正常工作，但不能播放sal：in和sal：out动画
const IndexPage = () => {
const element = document.querySelector(".animated")
element.addEventListener("sal:in",({ detail }) => {
console.log("entering",detail.target)
})
return (
<Layout>
<Head title="Home" />
<div className={indexStyles.wrapper}>
<h1 className={indexStyles.heading}>Hello World.</h1>
</div>
<div className={indexStyles.grid}>
<div className={indexStyles.item1}>
<img alt="pink background" src={HQpink}></img>
<div className={`${indexStyles.blurb} animated`}>
<div className={indexStyles.flexHeader}>
<div className={indexStyles.myFace}>
<img alt="ren" src={Ren}></img>
</div>
</div>
</div>
</div>
</div>
</Layout>
)
}解决方法
这是您的所有代码吗？然后，您没有指定要应用滚动显示效果的元素。
假设您要为包装器设置动画。向其添加自定义属性，如下所示：
<div data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-in" className={indexStyles.wrapper}>
<h1 className={indexStyles.heading}>Hello World.</h1>
</div>