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

slide scale

昨天跟大家分享了fly fade兩種過場動畫的方式,今天接續分享 slide scale 這兩種。

回顧怎麼使用

相信昨天分享的內容大家應該記憶猶新,不過還是幫大家溫習一下,通常使用過場動畫的時機點是在狀態變更的當下,所以在使用過場動畫一點要被包覆在if判斷式內。

再來就是要從svelte/transition將需要的方法import進來,然後向使用html的屬性一般的寫到html標籤內。

slide scale 的介紹

溫習完了就來介紹今天的主角 slide scale 。其實簡單講就是字面上的意思, slide 就是折疊,而 scale 就是縮放,接下來就請大家看看下列程式碼。

<script>
    import { slide } from 'svelte/transition';
    import { quintOut } from 'svelte/easing';
    let isVisable = true;
</script>

<input type="checkbox" bind:checked={isVisable}/>
{#if isVisable}
    <div transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
        slides in and out
    </div>
{/if}

上面的例子就是 slide 跟之前的差不多,就如前面的說明需要if判斷式,還有需要import,最後是在html上面加上即可。而下面的則是scale的範例。

<script>
    import { scale } from 'svelte/transition';
    import { quintOut } from 'svelte/easing';
    let isVisable = true;
</script>

<input type="checkbox" bind:checked={isVisable}/>
{#if isVisable}
    <div transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}">
        scales in and out
    </div>
{/if}

小結

今天跟大家介紹的 slide scale 是不是好寫易上手,明天再繼續為大家介紹。

發佈留言

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