> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/5./transition.md).

# 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\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="/files/-MGqwZuQK1aEaE5Bp21i" alt="만들면서 배우는 svelte"></div>