분류 전체보기54 [Svelte] Animate 지시자(The animate directive) 스벨트 트랜지션: 완벽한 모션 효과 만들기앞 장에서는 deferred 트랜지션을 사용하여 TODO 항목을 하나의 목록에서 다른 목록으로 이동할 때 부드러운 모션 효과를 구현하는 방법을 살펴보았습니다.사용자에게 완벽한 경험을 제공하기 위해서는 이동하지 않는 항목에도 모션 효과를 적용해야 합니다. 이를 위해 스벨트는 animate 지시자를 제공합니다.먼저 TodoList.svelte 파일을 열고 svelte/animate에서 flip 함수를 가져옵니다.그런 다음, animate:flip을 태그에 추가합니다.이 코드에서는 현재 효과가 약간 느리게 보이므로 duration 매개 변수를 추가하여 속도를 조정할 수 있습니다.duration 매개 변수는 숫자 값 (밀리초)뿐만 아니라 d => milliseconds.. 2024. 6. 6. [Svelte] Deferred transitions 스벨트 트랜지션: Deferred 트랜지션으로 애니메이션 효과 조합스벨트 트랜지션 엔진의 강력한 기능 중 하나는 여러 요소 간의 애니메이션 효과를 조합할 수 있는 Deferred 트랜지션입니다.예를 들어, 다음과 같은 두 개의 TODO 리스트를 살펴보겠습니다. 이 리스트에서 할 일 항목을 토글링하면 해당 항목이 반대쪽 목록으로 이동합니다. 하지만 현실 세계에서는 물체가 순간 이동하지 않습니다. 대신 점진적으로 위치를 변경합니다. 이러한 애니메이션 효과를 사용하면 사용자가 앱에서 발생하는 변화를 더 쉽게 이해할 수 있도록 도움을 줄 수 있습니다.이 효과는 transition.js 파일에 정의된 crossfade 함수를 사용하여 구현할 수 있습니다. crossfade 함수는 send와 receive라는 두 .. 2024. 6. 4. [Svelte] Key blocks 스벨트 키 블록: 동적 콘텐츠의 애니메이션 효과이제까지 스벨트 트랜지션은 요소가 처음 DOM에 추가되거나 DOM에서 제거될 때만 적용된다는 점을 살펴보았습니다. 하지만 요소의 콘텐츠가 변경될 때마다 트랜지션 효과를 적용하고 싶은 경우가 있습니다.스벨트는 이러한 상황을 처리하기 위해 키 블록 (key block) 을 제공합니다. 키 블록은 표현식의 값이 변경될 때 해당 블록의 콘텐츠를 제거하고 다시 생성합니다. 이를 통해 요소의 콘텐츠가 변경될 때마다 트랜지션 효과를 적용할 수 있습니다.{#key i} {messages[i] || ''} {/key}위 코드에서:{#key i} : 해당 블록을 키 블록으로 지정합니다. i 값을 키로 사용합니다. 태그 : 로딩 메시지를 표시하는 요소입니다.in:ty.. 2024. 5. 17. [Svelte] Global transitions 스벨트 트랜지션: 전역 트랜지션으로 애니메이션 효과 확장지금까지 스벨트 트랜지션은 직접 포함하는 블록이 추가 또는 제거될 때만 해당 요소에 적용된다는 점을 살펴보았습니다. 하지만 목록 자체에 트랜지션을 적용하고 싶을 수 있습니다. 즉, 개별 항목 추가/제거 시뿐만 아니라 전체 목록의 가시 여부를 토글링할 때도 트랜지션 효과를 적용하고 싶은 경우가 있습니다.이를 위해 스벨트는 전역 트랜지션 (global transition) 을 제공합니다. 전역 트랜지션은 트랜지션을 포함하는 블록이 추가 또는 제거될 때 실행됩니다.다음은 전역 트랜지션을 사용하는 예시 코드입니다. {item}위 코드에서: 태그에는 transition:slide|global 지시자가 적용되었습니다.slide : 적용할 트랜지션 효과 (이 .. 2024. 5. 14. [Svelte] Transition events 스벨트 트랜지션 이벤트트랜지션의 시작과 종료 시점을 알 수 있다면 애니메이션과 다른 요소들의 상호 작용을 제어하는 데 매우 유용합니다. 스벨트는 다른 모든 DOM 이벤트와 마찬가지로 트랜지션의 이벤트를 제공합니다.다음은 예시 코드입니다. status = 'intro started'} on:outrostart={() => status = 'outro started'} on:introend={() => status = 'intro ended'} on:outroend={() => status = 'outro ended'}> Flies in and out위 코드에서: 태그에는 transition:fly 지시자를 사용하여 fly 트랜지션을 적용했습니다.on:introstart 이벤트는 트랜지션이 나타나는 .. 2024. 5. 10. [Svelte] Custom JS transitions 스벨트 트랜지션: CSS vs 자바스크립트지금까지 스벨트 트랜지션을 사용하여 다양한 애니메이션 효과를 구현하는 방법을 살펴보았습니다. 대부분의 경우 CSS만으로도 훌륭한 효과를 만들 수 있지만, 자바스크립트를 사용해야만 구현할 수 있는 효과도 일부 존재합니다.대표적인 예시는 타자기 효과입니다.function typewriter(node, { speed = 1 }) { const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE; if (!valid) { throw new Error(`This transition only works on elements with a single text nod.. 2024. 5. 9. 이전 1 2 3 4 ··· 9 다음 반응형
