Making Your First Custom Svelte Transition

Svelte's transition API offers a powerful way to animate components entering or leaving the DOM, including creating custom transitions. Leveraging CSS animations by default ensures optimal performance. The basic syntax is straightforward: <element transition:transitionfunction=""></element>. You can also use in or out directives for one-way transitions.

Svelte's svelte/transition package provides seven pre-built transition functions, readily customizable with svelte/easing for diverse animation effects without writing custom code. Experiment with these to grasp the possibilities.

Need a Svelte introduction? We have a comprehensive overview available.

Crafting Custom Svelte Transitions

For finer control beyond pre-built options, Svelte allows defining custom transition functions, subject to specific conventions. The API structure, as documented, is:

transition = (node: HTMLElement, params: any) => {
  delay?: number,
  duration?: number,
  easing?: (t: number) => number,
  css?: (t: number, u: number) => string,
  tick?: (t: number, u: number) => void
}

A transition function receives the DOM node and returns an object with animation parameters. Crucially, it includes a css or tick function.

The css function returns a CSS string defining the animation (e.g., transforms or opacity changes). The tick function offers complete JavaScript control, but at a performance cost as it bypasses CSS animations.

Both css and tick use parameters t (0.00 to 1.00 on entry, 1.00 to 0.00 on exit) and u (1 - t). For instance, transform: scale(${t}) smoothly scales from 0 to 1 on entry and reverses on exit.

Let's build a custom transition to illustrate.

Your First Custom Svelte Transition

We'll start with a simple toggle to control an element's DOM presence using a Svelte #if block (remember, transitions only occur on DOM entry/exit).

<script>
  let showing = true;
</script>

<label for="showing">
  Showing
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if showing}
  <h1>Hello custom transition!</h1>
{/if}

Toggling the checkbox shows the stark appearance/disappearance. Now, let's add a custom transition function:

<script>
  let showing = true;
  function whoosh(node) {
    console.log(node);
  }
</script>

<label for="showing">
  Showing
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if showing}
  <h1 transition:whoosh="">Hello custom transition!</h1>
{/if}

Toggling now logs the element to the console, confirming the connection. We'll enhance this with animation. Let's create a css function for scaling:

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t) => `transform: scale(${t})`
    }
  }
  let showing = true;
</script>

<label for="showing">
  Showing
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if showing}
  <h1 transition:swoop="">Hello custom transition!</h1>
{/if}

The element now scales, but abruptly. Using t for smooth animation:

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t) => `transform: scale(${t})`
    }
  }
  let showing = true;
</script>

<label for="showing">
  Showing
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if showing}
  <h1 transition:swoop="">Hello custom transition!</h1>
{/if}

For a "swooping" effect, let's add translateX, animating from the side:

<script>
  function swoop() {
    return {
      duration: 1000,
      css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)`
    }
  }
  let showing = true;
</script>

<label for="showing">
  Showing
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if showing}
  <h1 transition:swoop="">Hello custom transition!</h1>
{/if}

Here, u (inverse of t) controls the translateX, ensuring smooth movement.

Finally, let's add an easing function:

<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">
  Showing
</label>
<input type="checkbox" bind:checked="{showing}" id="showing">

{#if showing}
  <h1 transition:swoop="">Hello custom transition!</h1>
{/if}

Conclusion

You've now created a custom Svelte transition! This is just a starting point; explore the documentation and tutorials for more advanced techniques. Understanding the interplay of t and u is key to creating dynamic animations.

The above is the detailed content of Making Your First Custom Svelte Transition. For more information, please follow other related articles on the PHP Chinese website!