0

我正在尝试将滚动动画添加到我的 gatsby 网站。我正在使用的插件，当元素进入视图和/或元素离开时，sal 应该能够支持动画。我正在尝试在元素处于视图中时向其添加滑入式动画，但我知道如何让它工作。当我尝试查询元素时，它显示为空。任何人都知道如何让它工作。

ps 一切都在 gatsby 配置中正确设置，我可以让动画工作，但不是 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>
  )
}

4

1 回答 1

0

这就是你所有的代码吗？然后您还没有指定要应用滚动显示效果的元素。

假设您要为包装器设置动画。向其添加自定义属性，如下所示：

<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>
于 2020-09-23T09:07:12.613 回答