使用帶有 Svelte 套件的 AOS 動畫時遇到問題

Question

我第一次將 svelte 用於投資組合並且來自 React 我必須說它非常有趣且易於使用！

但最近我在使用帶有 svelte 套件的 AOS 時遇到了問題。 大多數情況下，當我使用 href 從一個頁面轉到另一個頁面時，動畫不會加載。 但是當我刷新頁面（使用 cmd+R）時，它又可以工作了。

回購鏈接

我在我的 __layout.svelte 中使用了這個方法。 是否將其放入 onMount 不會改變任何東西。

    onMount(() => {
        AOS.init();
    });

然后在另一個頁面中，我正在使用 AOS，如下所示

        <h1
            data-aos="slide-right"
            data-aos-duration="1000"
        >
            Allianz France
        </h1>

並從一個頁面到另一個頁面我正在使用

            <a
                href="allianz"
                sveltekit:reload
                out:fly|local={{ x: -200, duration: 1000, delay: 300 }}
                in:fly={{ x: 200, duration: 1000, delay: 1300 }}
                id="allianz"
            >

使用 sveltekit:reload 不會改變任何東西。

包.json

"aos": "^3.0.0-beta.6"

Answer 1

AOS（ A nimate on S croll）庫將在 DOM 中查找具有 data-aos 屬性的元素，它甚至會監視 DOM 的變化。

該功能有局限性。 當 Svelte 管理 DOM 或基於其他因素更改布局時，AOS 庫需要一點幫助。

AOS.refresh();

何時調用該方法取決於您的應用程序。

提示：調試添加window.AOS = AOS; 在onMount中，允許從控制台調用OAS.refresh() 。