스벨트18 [SVELTE] Transitions - The transition directive, Adding parameters, In and out, Custom CSS transitions, Custom JS transitions, Transition events, Local transitions, Deferred transitions, Key blocks transitionsSvelte는 DOM에 요소들이 추가, 제거되었을 때 트랜지션을 효과적으로 지원하는 트랜지션 디렉티브를 제공한다. 1. the transition directive visible{#if visible} Fades in and out {/if} 2. Adding parameters트랜지션 함수에 파라미터를 전달하는 것이 가능하다. 데이터를 바인딩 하는 방법과 동일하게 파라미터로 전달하려는 값을 바인딩 하면 된다 visible{#if visible} Flies in and out {/if} - 트랜지션의 종류fade 트랜지션 : fade 트랜지션은 요소의 opacity를 조절하는 트랜지션/ 불투명에서 투명으로 투명.. 2023. 3. 11. [SVELTE] Motion- Tweened, Spring Motion변수의 값이 업데이트 되었을 때 사용할 수 있는 애니메이션 기능인 motion 기능을 제공한다 Tweened progress.set(0)}"> 0% progress.set(0.25)}"> 25% progress.set(0.5)}"> 50% progress.set(0.75)}"> 75% progress.set(1)}"> 100% - tweened 함수store = tweened(value: any, options)tweened 함수는 2개의 파라미터를 갖는다. 첫번째 파라미터는 변경되는 값, 두번째 파라미터는 옵션이다. tweened함수는 store를 리턴한다. options에서 선택할 수 있는 값은 아래와 같다delay : 디폴트값0, 단위 ms, 설정한 시간 후에 .. 2023. 3. 8. [SVELTE] Stores- Writable stores, Auto-subscriptions, Readable stores, Derived stores, Custom stores, Store bindings StoresSvelte는 상태 관리 라이브러리를 따로 지원하지 않고, Svelte 내부(svelte/store)에 포함되어 있다. store는 서로 관계없는 컴포넌트끼리 같은 데이터에 접근해야할 때 사용된다. A 컴포넌트의 데이터를 B와 C 컴포넌트에서 사용해야 한다고 할 때, store를 사용하면 간편하게 데이터 전달할 수 있다. Svelte의 store은 subscribe 함수를 포함하는 단순한 객체이다. subscribe 함수는 관찰하고 있는 값이 변경될 때마다 컴포넌트에게 알려주는 콜백 함수이다. Writable stores보통의 store는 읽기, 쓰기(수정)이 가능해야한다. 읽기, 쓰기 모두 가능한 sotre(writable store)를 생성해보자. The count is {countValu.. 2023. 3. 8. [SVELTE]Lifecycle - onMount, onDestory, beforeUpdate and afterUpdate, tick Lifecycle lifecycle 즉, 생명주기!라이프사이클 함수는 컴포넌트가 화면에 마운트 되기 전과 되고 난 후의 상태에 어떤 작업을 처리할 때 사용하는 함수onMount : 컴포넌트가 돔에 마운트 되면 실행onDestroy : 컴포넌트가 해제된 후 실행berforeUpdate : 컴포넌트가 마운트 되기 전 실행afterUpdate: 컴포넌트가 마운트 된 후 실행tick : 컴포넌트 변경이 완료되면 실행 (라이프사이클과 성격이 조금 다르다)순서 : beforeUpdate -> onMount -> afterUpdate -> onDestroy부모와 자식 컴포넌트 사이에 라이프사이클의 경우 는 부모의 beforeUpdate 이후 자식 컴포넌트의 모든 라이프사이클 즉 afterUpdate 이후에 부모의 o.. 2023. 3. 8. 이전 1 2 3 4 5 다음
