첫 번째 맞춤형 전환을 만듭니다

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!