motion, transition, easing, animate

sting01·2023년 2월 18일
0

svelte

목록 보기
10/18
<script>
	import { writable } from 'svelte/store';
	import { tweened } from 'svelte/motion';
	import { cubicIn } from 'svelte/easing';
	import { fade, slide, scale, fly } from 'svelte/transition';
	import { flip } from 'svelte/animate';

	const progress = tweened(0, {
		delay: 0,
		duration: 700,
		easing: cubicIn,
	});

	//const progress = writable(0);

	setTimeout(() => {
		progress.set(0.5);
	});

	let boxInput;
	let boxs = [];

	const addBox = () => {
		boxs = [...boxs, boxInput.value];
	};

	const discard = value => {
		boxs = boxs.filter(x => x !== value);
	};
</script>

<style>
	.box {
		width: 10rem;
		height: 10rem;
		background-color: #ccc;
		margin: 1rem;
		padding: 1rem;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
	}
</style>

<progress value="{$progress}"></progress>

<input type="text" name="" id="" bind:this="{boxInput}" />
<button type="button" on:click="{addBox}">box 추가</button>

{#each boxs as box (box)}
	<div
		transition:fly="{{
			easing: cubicIn,
			delay: 0,
			duration: 300,
			x: 0,
			y: 200,
		}}"
		on:click="{discard.bind(this, box)}"
		animate:flip="{{ duration: 300 }}"
		class="box"
	>
		{box}
	</div>
{/each}

스벨트는 기본 적으로 전환에 대한 요소를 가지고 있다.
linear 형태 보다 스무스 한 전환
기본적인 요소가 있고 해당 전환 마다 option 값이 추가 적으로 있다.
추가 적으로 spring, in,out 등 option값이 더 있다.

ex

easing: cubicIn,
			delay: 0,
			duration: 300,
			x: 0,
			y: 200,```

0개의 댓글