第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY24- 過場動畫

Transitions 過場動畫

Transitions 是今天要分享的主題,相信不管在哪裡都很常看到他,因為有他畫面呈現才不會那麼硬梆梆的,當然 svelte 有內建自己的過場動畫,今天就來介紹一下。

Transitions 甚麼是過場動畫

相信大家都很熟悉 Power Point ,也知道如果單純的換頁會讓看投影片的人覺得單調乏味,甚至於無法吸收到講者想要分享的內容,所以在 Power Point 在換頁時會有些動畫呈現方式,讓聽眾不會感覺到投影片太死板。當然網頁也是一樣的,如果太單調會讓瀏覽的觀眾覺得太枯燥乏味,所以 svelte 才會有內建今天要跟大家分享的 Transitions 過場動畫。

Transitions 的種類

這部分大家可以參考官網的Transitions API 文件,這部分先跟大家分享一下它的種類有以下六種。

  • fade
  • fly
  • slide
  • scale
  • draw
  • crossfade

Transitions 的使用方法

在介紹完 Transitions 的種類後大家比較有興趣的是這過場動畫怎麼用,今天先跟大家分享一些簡單的過場動畫的使用方式,今天會跟大家分享的是fade淡入淡出跟fly飛入飛出。所以先請大家看一下下列的程式碼。

<script>
    import { fade } from 'svelte/transition';
    let visible = true;
</script>

<label>
    <input type="checkbox" bind:checked={visible}>
    visible
</label>

{#if visible}
    <p transition:fade>
        Fades in and out
    </p>
{/if}

上面的例子是跟大家分享如何讓html的元件淡入淡出的呈現,簡單說明一下就是先從 svelte/transition import fade 進來,接下來在html上加上transition:fade即可,但是一定要在這之前加入顯示的條件,如此在顯示時會淡入,不顯示時會淡出。接下來大家再看看下列的程式碼。

<script>
    import { fly } from 'svelte/transition';
    let visible = true;
</script>

<label>
    <input type="checkbox" bind:checked={visible}>
    visible
</label>

{#if visible}
    <p transition:fly="{{ y: 200, duration: 2000 }}">
        Fades in and out
    </p>
{/if}

接承fade的例子我們在改寫成fly的例子,簡單說明一下就是當元件消失的時候會跑到指定的位置淡出,這部分跟大家分享的是過場動畫後可以接著要如何呈現的變數,以上面的例子就是耗時2000毫秒移動到y=200的位置後淡出。

小結

今天先跟大家初步的介紹 Transitions 過場動畫,並且分享了兩個過場動畫的種類fadefly,還有用實際的例子告訴大家他是甚麼以及該如何使用,希望大家會喜歡。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *