feat:更新intersection observer互動效果

[ML-Kami]

這個特效的邏輯是這樣，在想要的父層區塊加上

<div
        v-in-view="{ once: true }"
        class="in-view"
    >

這樣當這個區塊進入到可視範圍內的時候，這個父層的div才會在那個當下加上class="in-view" 並聯動到對應的css文件（src/assets/ani-entrance.scss）

因此子層中，有帶入"ani-entrance ani-entrance-0"的元件就會執行css文件內的

@keyframes slide-in-blurred-bottom {
    0% {
        transform: translateY(100px);
        transform-origin: 50% 100%;
        filter: blur(10px);
        opacity: 0;
    }

    50% {
        filter: blur(0);
    }

    100% {
        transform: translateY(0);
        transform-origin: 50% 50%;
        opacity: 1;
    }
}

也就是彈跳浮出

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
attack-on-game	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 26, 2024 4:09am

[eee317]

感恩加持動畫效果 我有對這幾個地方加了動畫，已經推上去，你再看看，沒問題的話可以合併～ 如果可以的話，希望可以來個沒有 .once 的寫法～～

[ML-Kami]

我修改了一些小地方，第一個是按鈕那邊，因為你的 in-view 寫在最大的父層外面，導致父層in-view時，按鈕還在畫面外，但按鈕已經執行彈跳浮出，如果不是華很快會看步道~~

要讓他多談幾次就是把

v-in-view="{ once: true }"

改成

v-in-view=""

你可以再定奪一下~~我怕有點多XDDD