transition : 화면전환

transition은 일종의 화면전화 효과라고 보시면 되겠습니다. svetle에서는 이 전환효과를 쉽게 구현하도록 transition drective를 제공하고 있습니다.

예제를 통해 보시면 조금더 이해가 빠를 것입니다.

fade

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

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

{#if condition}
	<div transition:fade={{delay:1000, duration:1000}}>
		transiton 예제
	</div>
{/if}

condition이 true이면 'transiton 예제' 라는 문장이 나오도록 한 간단한 예제 입니다.

이제 체크박스로 condition을 true로 만들어 주시면 보시는 것 처럼 transiton이 fade 효과와 함께 나오는 것을 볼 수 있습니다.

제공되는 효과의 종류로는 fade, blur, fly, slide, scale, draw 가 있고, 공통적으로 delay, duration, easing 이라는 속성을 가집니다.

• delay : 지정된 시간(milliseconds) 후에 전환 효과가 실행되도록

• duration: 효과가 지정된 시간동안 실행되도록

<div transition:fade="{{delay: 1000, duration: 300}}">

샘플로 설명

나머지 각각 효과들에 대해서도 간단하게 알아보겠습니다.

blur

: 흐려지는 효과

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

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

{#if condition}
	<div transition:blur="{{delay: 200, duration: 300, opacity: 1, amount: 5}}">
		transiton 예제
	</div>
{/if}

delay, duration은 fade에서 설명한 부분을 참고하시면 되고,

• delay

• duration

• easing

• opacity: 애니메이션 불투명도 값

• amount: px단위로 흐릿해지는 애니메션 크기

fly

설정한 x, y 좌표에서 부터 나오는 효과

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

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

{#if condition}
	<div transition:fly="{{delay: 200, duration: 300, x:200}}">
		transiton 예제
	</div>
{/if}

• delay

• duration

• easing

• x : 화면효과가 시작되거나 끝나는 x축 좌표

• y: 화면효과가 시작되거나 끝나는 y축 좌표

• opacity

slide

: 슬라이드 효과

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

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

{#if condition}
	<div transition:slide="{{delay: 200, duration: 300, x:200}}">
		transiton 예제
	</div>
{/if}

• delay

• duration

• easing

scale

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

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

{#if condition}
	<div transition:scale="{{delay: 200, duration: 300}}">
		transiton 예제
	</div>
{/if}

• delay

• duration

• easing

• start : 설정한 크기만큼 커지거나 작어지면서 사라지거나 나타남

• opacity

draw

svg 요소의 선을 그리는 듯한 효과

<script>
	import { draw } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	
	let condition = false
</script>

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

<svg viewBox="0 0 5 5" xmlns="<http://www.w3.org/2000/svg>">
	{#if condition}
		<path transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"
					d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
					fill="none"
					stroke="cornflowerblue"
					stroke-width="0.1px"
					stroke-linejoin="round"
		/>
	{/if}
</svg>

• delay

• duration

• easing

• speed : svg가 그려지는 속도

in, out 효과

in, out을 이용해 요소가 나타날때와 사라질때 각각 다른 효과를 줄 수 있습니다.

in: 요소가 나타날 때 효과

out: 요소가 사라질 때 효과

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

<label>
	<input type="checkbox" bind:checked={condition} /> 
	효과 보기
</label>

{#if condition}
	<div in:fade out:fly="{{y: 200,}}" >
		transiton 예제
	</div>
{/if}

animation

todo 실습과 함께 설명.

[만들면서 배우는 Svelte]

만들면서 배우는 svelte