고급 Svelte 전환 기능

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 전환 이벤트, 로컬 및 지연된 전환을 포함한 고급 Svelte 전환 기능을 사용하는 방법을 살펴보겠습니다.

전환 이벤트

다양한 전환 이벤트에 대한 이벤트 핸들러를 추가하여 로깅과 같은 작업을 수행할 수 있습니다.

예를 들어 다음 코드를 작성하여 p 요소를 켜고 끌 때 애니메이션을 추가하고 애니메이션 상태를 표시할 수 있습니다.
App.svelte  :

<script>
 import { fly } from "svelte/transition";
 let visible = true;
 let status = "";
</script>

<button on:click={() => visible = !visible}>Toggle</button>
<p>Animation status: {status}</p>
{#if visible}
<p
  transition:fly="{{ y: 200, duration: 2000 }}"
  on:introstart="{() => status = 'intro started'}"
  on:outrostart="{() => status = 'outro started'}"
  on:introend="{() => status = 'intro ended'}"
  on:outroend="{() => status = 'outro ended'}"
>
  foo
</p>
{/if}

위의 코드에서 introstart 를 설정하는 outrostart , introend , outroend 및 status 이벤트에 대한 이벤트 핸들러를 추가합니다.

그런 다음 p 태그에 status를 표시합니다. Toggle 버튼을 클릭하면 애니메이션이 발생하고 status 업데이트되는 것을 볼 수 있습니다.

로컬 전환

로컬 전환을 사용하여 개별 목록 요소에 전환을 적용할 수 있습니다. 예를 들어 다음을 작성하여 목록의 각 항목에 slide 효과를 추가할 수 있습니다.
App.svelte  :

<script>
  import { slide } from "svelte/transition";
  let items = [];
  const addItem = () => {
    items = [...items, Math.random()];
  };
</script>

<button on:click={addItem}>Add Item</button>
{#each items as item}
  <div transition:slide>
    {item}
  </div>
{/each}

코드에는 배열에 새 숫자를 추가하는 addItem 함수가 있습니다. 그런 다음 마크업에 배열을 표시합니다.
each 안의 div에 항목이 추가될 때 슬라이드 효과를 적용하기 위해 transition:slide 지시문을 추가합니다.

따라서 항목 추가를 클릭하면 슬라이드 효과가 나타납니다.

지연된 전환

Svelte를 사용하면 전환을 연기하여 여러 요소 간의 애니메이션을 조정할 수 있습니다.
crossfade 함수를 사용하여 이를 달성할 수 있습니다. send 및 receive 라는 한 쌍의 전환을 생성합니다.

요소가 전송되면 수신되는 해당 요소를 찾고 요소를 상대 위치로 변환하고 페이드 아웃하는 전환을 생성합니다.

요소가 수신되면 반대 현상이 발생합니다. 상대방이 없으면 fallback 전환이 사용됩니다.

예를 들어 다음과 같이 2개의 목록 사이에서 항목 이동을 애니메이션으로 만들 수 있습니다.
App.svelte  :

<script>
  import { cubicOut } from "svelte/easing";
  import { crossfade } from "svelte/transition";

  const [send, receive] = crossfade({
    duration: d => Math.sqrt(d * 200),

    fallback(node, params) {
      const style = getComputedStyle(node);
      const transform = style.transform === "none" ? "" : style.transform;

      return {
        duration: 600,
        easing: cubicOut,
        css: t => `
          transform: ${transform} scale(${t});
          opacity: ${t}
        `
      };
    }
  });

  let uid = 1;

  let todos = [
    { id: uid++, done: false, description: "write some docs" },
    { id: uid++, done: false, description: "eat" },
    { id: uid++, done: true, description: "buy milk" },
    { id: uid++, done: false, description: "drink" },
    { id: uid++, done: false, description: "sleep" },
    { id: uid++, done: false, description: "fix some bugs" }
  ];

  const mark = (id, done) => {
    const index = todos.findIndex(t => t.id === id);
    todos[index].done = done;
  };
</script>

<style>
  #box {
    display: flex;
    flex-direction: row;
  }
</style>

<div id='box'>
  <div>
    Done:
    {#each todos.filter(t => t.done) as todo}
      <div
        in:receive="{{key: todo.id}}"
        out:send="{{key: todo.id}}"
      >
        {todo.description}
        <button on:click={mark(todo.id, false)}>Not Done</button>
      </div>
    {/each}
  </div>
  <div>
    Not Done:
    {#each todos.filter(t => !t.done) as todo}
      <div
        in:receive="{{key: todo.id}}"
        out:send="{{key: todo.id}}"
      >
        {todo.description}
        <button on:click={mark(todo.id, true)}> Done</button>
      </div>
    {/each}
  </div>
</div>

위의 코드에서 send 함수를 사용하여 receive 및 crossfade 전환 함수를 만들었습니다.
fallback 애니메이션은 receive에 대한 send 대응물이 없을 때 사용되며 그 반대의 경우도 마찬가지입니다. 이는 두 요소 사이에서 요소를 이동하지 않는 경우 발생할 수 있습니다.

대체 애니메이션은 애니메이션되는 요소에 약간의 크기 조정 및 불투명도 변경만 수행합니다.

완료된 항목과 완료되지 않은 항목에 대해 2개의 할일 목록을 렌더링합니다. 할 일 항목 옆에 있는 완료 또는 완료되지 않음 버튼을 클릭하면 포함된 div 사이에서 항목을 이동할 때 페이드 효과가 나타납니다.

이것은 in 및 out 애니메이션으로 달성되며, 값이 key로 설정된 id 속성이 있는 객체를 전달하여 Svelte가 우리가 이동 중인 요소를 알 수 있도록 합니다.

결론

여러 요소가 포함될 때 전환을 조정하기 위해 crossfade를 사용할 수 있습니다.

또한 로컬 전환을 사용하여 렌더링되는 목록 항목에 애니메이션을 적용합니다.

마지막으로 각각에 이벤트 리스너를 연결하여 전환 중에 발생하는 이벤트를 수신하여 전환 효과를 추적할 수 있습니다.