使用 gatsby 和 gatsby-plugin-scroll-reveal 實現滾動動畫

Question

我正在嘗試將滾動動畫添加到我的 gatsby 網站。 我正在使用的插件，當元素進入視圖和/或元素離開時，sal 應該能夠支持 animation。 我正在嘗試將滑入式 animation 添加到元素中，但我確定如何讓它工作。 當我嘗試查詢元素時，它顯示為 null。 任何人都知道如何讓它工作。

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

Answer 1

這就是你所有的代碼嗎？ 然后您還沒有指定要應用滾動顯示效果的元素。

假設您要為包裝器設置動畫。 向其添加自定義屬性，如下所示：

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

使用 gatsby 和 gatsby-plugin-scroll-reveal 實現滾動動畫

問題描述

1 個解決方案

解決方案1
0 2020-09-23 09:07:12

使用 gatsby 和 gatsby-plugin-scroll-reveal 實現滾動動畫

問題描述

1 個解決方案

解決方案1 0 2020-09-23 09:07:12

解決方案1
0 2020-09-23 09:07:12