Animate 網頁動畫 #

GSAP 官網 | Three.js 官網 | Animate.css 官網 | Pixi Js 官網

在網頁製作動畫最基本要了解 3 個步驟 :

1. 起始畫面(進場)。
2. 運作設定(持續時間、順序、速度、重複或返回)。
3. 結束畫面(離場)。

當然有些設計會讓畫面持續運作，所以就沒有所謂的結束畫面，通常這樣設計是想讓畫面豐富或者是想與操作者互動，一般網頁則不需要這麼費工。

Vue.js Transition #

這裡先從 Vue 本身的過場動作設定 transition 開始介紹:

標籤 <transition> 運用在切換畫面或功能上，通常會標註在 CSS 或寫在標籤上共有幾種 :

1. v-enter-from | enter-from-class
2. v-enter-active | enter-active-class
3. v-enter-to | enter-to-class
4. v-leave-from | leave-from-class
5. v-leave-active | leave-active-class
6. v-leave-to | leave-to-class

其實原理只有3種 (GSAP也是一樣)，也就是 起始 (from) -> 執行狀態設定 (active) -> 結束 (to)。

• from 設定起始畫面
• active 設定動畫時間、變化
• to 設定結束畫面

<transition name="bounce">
    <p> ... </p>
</transition>

<transition enter-from-class=""
            enter-active-class=""
            enter-to-class=""
            leave-from-class=""
            leave-active-class=""
            leave-to-class="">
    <p> ... </p>
</transition>

<style>
    .bounce-enter-from,
    .bounce-leave-to{

    }
    .bounce-enter-active,
    .bounce-leave-active {
        transition: all 0.3s ease-out;
    }   
    .bounce-enter-to,
    .brouce-leave-from {
        
    }
</style>

參考 #

• CSS Flex 屬性一點也不難
• Vue.js - Transition
• Animating with Vue — Vue Amsterdam Conference 2022 Summary series — Seventh Talk
• 如何利用 Gsap ScrollTrigger 做出滾動動畫? Vue 專案 載入 ScrollTrigger
• 下拉＆路徑動畫系列-使用GreenSock套件，用更簡單的JS指令操控網頁動畫
• gsap example - Play with Header on Page Transitions