FrontEnd/Svelte
[Svelte] Svelte 기본문법 #4 (Transition)
js-web
2024. 1. 17. 12:39
반응형
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>
참고사이트
반응형