[Svelte] Svelte 기본문법 #4 (Transition)

Transition (화면전환 효과)

1. 기본 사용법

<script>
import { fade, blur, fly, slide, scale, draw } from 'svelte/transition';

let fade = false;
let blur = false;
let fly = false;
let slide = false;
let scale = false;
</script>

<button on:click={() => fade = true }> fade </button>
<button on:click={() => blur = true }> blur </button>
<button on:click={() => fly = true }> fly </button>
<button on:click={() => slide = true }> slide </button>
<button on:click={() => scale = true }> scale </button>

<div transition:fade class="wrap">
    <h1> fade 예시 </h1>
</div>
<div transition:blur class="wrap">
    <h1> blur 예시 </h1>
</div>
<div transition:fly class="wrap">
    <h1> fly 예시 </h1>
</div>
<div transition:slide class="wrap">
    <h1> slide 예시 </h1>
</div>
<div transition:scale class="wrap">
    <h1> scale 예시 </h1>
</div>

 

2. Transition Options

/** 
transition option
delay : 지정시간 이후 효과 실행
duration : 지정시간 동안 효과 실행
easing : 샘플링된 전환 효과 
    example > https://svelte.dev/examples/easing
    docs > https://svelte.dev/docs#run-time-svelte-easing
**/ 
<div transition:트랜지션 이름="{{ duration: 100, delay: 500}}" class="wrap">
    <h1> 사용할 transition 예시 </h1>
</div>

 

 

참고사이트

https://svelte.dev/examples/transition-events

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EC%8B%9C%EC%9E%91-%EC%9B%B9-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C&unitId=152820&tab=curriculum