Svelte의 전환 API는 사용자 정의 전환 생성을 포함하여 DOM에 들어가거나 떠나는 부품을 애니메이션하는 강력한 방법을 제공합니다. 기본적으로 CSS 애니메이션을 활용하면 최적의 성능이 보장됩니다. 기본 구문은 간단합니다.<element transition:transitionfunction=""></element>
. 일방 통행 전환을 위해 out
in
사용될 수도 있습니다.
Svelte의 svelte/transition
패키지는 7 개의 사전 구축 된 전환 기능을 제공하며, 사용자 지정 코드를 작성하지 않고 다양한 애니메이션 효과를 위해 svelte/easing
으로 쉽게 사용자 정의 할 수 있습니다. 가능성을 파악하기 위해 이것들을 실험하십시오.
벨트 소개가 필요하십니까? 포괄적 인 개요가 있습니다.
사전 구축 된 옵션을 넘어서 더 미세한 제어를 위해 Svelte는 특정 규칙에 따라 사용자 정의 전환 기능을 정의 할 수 있습니다. 문서화 된 API 구조는 다음과 같습니다.
전환 = (노드 : htmlelement, params : any) => { 지연? : 숫자, 기간? : 숫자, 완화? : (t : 숫자) => 숫자, css? : (t : 숫자, u : 숫자) => 문자열, 진드기? : (t : 숫자, u : 숫자) => void }
전환 함수는 DOM 노드를 수신하고 애니메이션 매개 변수로 객체를 반환합니다. 결정적으로 css
또는 tick
기능이 포함됩니다.
css
함수는 애니메이션을 정의하는 CSS 문자열을 반환합니다 (예 : 변환 또는 불투명도 변경). tick
함수는 완전한 JavaScript 컨트롤을 제공하지만 CSS 애니메이션을 우회하므로 성능 비용으로 제공됩니다.
css
와 tick
모두 매개 변수 t
(입력시 0.00 ~ 1.00, 출구시 1.00 ~ 0.00) 및 u
(1 t
)를 사용합니다. 예를 들어, transform: scale(${t})
입구시 0에서 1으로 부드럽게 스케일링하고 출구시 반전됩니다.
설명하기 위해 사용자 정의 전환을 구축합시다.
Svelte #if
블록을 사용하여 요소의 DOM 존재를 제어하기위한 간단한 토글로 시작합니다 (DOM 입력/출구에서만 전환이 발생합니다).
<script> let showing = true; </script> <label for="showing"> 전시 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if show} <h1>안녕하세요 커스텀 전환!</h1> {/만약에}
확인란을 전환하면 뚜렷한 외관/실종이 표시됩니다. 이제 사용자 정의 전환 기능을 추가하겠습니다.
<script> let showing = true; function whoosh(node) { console.log(node); } </script> <label for="showing"> 전시 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if show} <h1 transition:whoosh="">안녕하세요 커스텀 전환!</h1> {/만약에}
토글링은 이제 요소를 콘솔에 로그인하여 연결을 확인합니다. 우리는 애니메이션으로 이것을 향상시킬 것입니다. 스케일링을위한 css
함수를 작성하겠습니다.
<script> function swoop() { return { duration: 1000, css: (t) => `transform: scale(${t})` } } let showing = true; </script> <label for="showing"> 전시 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if show} <h1 transition:swoop="">안녕하세요 커스텀 전환!</h1> {/만약에}
요소는 이제 비늘이지만 갑자기 갑자기. 부드러운 애니메이션에 t
사용 :
<script> function swoop() { return { duration: 1000, css: (t) => `transform: scale(${t})` } } let showing = true; </script> <label for="showing"> 전시 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if show} <h1 transition:swoop="">안녕하세요 커스텀 전환!</h1> {/만약에}
"Swooping"효과의 경우, translateX
추가하고 측면에서 애니메이션을 추가하겠습니다.
<script> function swoop() { return { duration: 1000, css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)` } } let showing = true; </script> <label for="showing"> 전시 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if show} <h1 transition:swoop="">안녕하세요 커스텀 전환!</h1> {/만약에}
여기서 u
(t of t
)는 translateX
제어하여 부드러운 움직임을 보장합니다.
마지막으로 완화 기능을 추가하겠습니다.
<script> import { elasticOut } from 'svelte/easing'; function swoop() { return { duration: 1000, easing: elasticOut, css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)` } } let showing = true; </script> <label for="showing"> 전시 </label> <input type="checkbox" bind:checked="{showing}" id="showing"> {#if show} <h1 transition:swoop="">안녕하세요 커스텀 전환!</h1> {/만약에}
당신은 이제 커스텀 스벨의 전환을 만들었습니다! 이것은 단지 출발점 일뿐입니다. 보다 고급 기술에 대한 문서 및 튜토리얼을 탐색하십시오. t
와 u
의 상호 작용을 이해하는 것은 동적 애니메이션을 만드는 데 중요합니다.
위 내용은 첫 번째 맞춤형 전환을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!