# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://freeseamew.gitbook.io/svelte/5./transition.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.