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.
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.
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}
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!