Home > Web Front-end > CSS Tutorial > Making Your First Custom Svelte Transition

Making Your First Custom Svelte Transition

尊渡假赌尊渡假赌尊渡假赌
Release: 2025-03-15 11:08:09
Original
1008 people have browsed it

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
}
Copy after login

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}
Copy after login

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}
Copy after login

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}
Copy after login
Copy after login

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}
Copy after login
Copy after login

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}
Copy after login

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}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template