Guías Técnicas

Guía de Animaciones y Transiciones en Svelte

Svelte incorpora herramientas integradas para manejar animaciones y transiciones de forma sencilla y declarativa.

Transiciones Básicas (transition)

Las transiciones en Svelte se aplican usando la directiva transition: junto con funciones predefinidas como fade, slide, scale, entre otras.

Ejemplo 1: fade El código alterna la visibilidad de un <div> con una animación de desvanecimiento (fade) al hacer clic en el botón. El texto del botón cambia según el estado de mostrar.

js 
<script>
import { fade } from 'svelte/transition';
let mostrar = false;
</script>

<button on:click={() => (mostrar = !mostrar)}>
{mostrar ? 'Ocultar' : 'Mostrar'}
</button>

{#if mostrar}
<div transition:fade style="background: lightblue; padding: 10px;">
  Hola, soy un elemento con fade.
</div>
{/if}

Ejemplo 2: slide El código alterna la visibilidad de un <div> con una animación de deslizamiento (slide) al hacer clic en el botón. El texto del botón cambia según el estado de visible.

js 
<script>
import { slide } from 'svelte/transition';
let visible = false;
</script>

<button on:click={() => (visible = !visible)}>
{visible ? 'Ocultar' : 'Mostrar'}
</button>

{#if visible}
<div transition:slide style="background: lightgreen; padding: 10px;">
  Me estoy deslizando.
</div>
{/if}

Configuración de transiciones

Puedes configurar las transiciones especificando parámetros como duration, delay, y easing:

js 
<script>
import { scale } from 'svelte/transition';
</script>

<div transition:scale={{ duration: 500, delay: 200 }}>Hola con estilo!</div>

Transiciones entre Elementos (animate)

Svelte permite animar cambios en la posición de los elementos usando animate: con el helper flip.

Ejemplo: Reordenar elementos El código mezcla aleatoriamente los elementos de la lista al hacer clic en el botón, aplicando una animación flip a cada elemento para que se mueva suavemente al cambiar de posición.

js 
<script>
import { flip } from 'svelte/animate';
let items = [1, 2, 3, 4, 5];

function mezclar() {
  items = items.sort(() => Math.random() - 0.5);
}
</script>

<button on:click={mezclar}>Mezclar</button>

<ul>
{#each items as item (item)}
  <li animate:flip style="padding: 10px; background: lightgray; margin: 5px;">
    {item}
  </li>
{/each}
</ul>

Aquí, animate:flip asegura que los elementos se animen suavemente cuando cambian de posición.

Animaciones Personalizadas

Si necesitas más control, puedes crear animaciones personalizadas utilizando funciones definidas por el usuario.

Ejemplo: Creación de una animación personalizada

js 
<script>
import { cubicOut } from 'svelte/easing';
import { tweened } from 'svelte/motion';

const escala = tweened(0, {
  duration: 1000,
  easing: cubicOut
});

function animar() {
  escala.set(Math.random());
}
</script>

<button on:click={animar}>Animar</button>

<div bind:this style="transform-origin: center;">
<div style="background: coral; width: 100px; height: 100px; transform: scale({$escala})">
  Animado
</div>
</div>
  Explicación

  • tweened es una utilidad para interpolar valores entre dos estados.
  • Puedes usar easing para controlar la suavidad de la animación.

  Conclusión

Svelte simplifica el manejo de transiciones y animaciones con directivas intuitivas y utilidades integradas. Ya sea que necesites una simple transición de entrada/salida, animar reordenamientos o crear animaciones personalizadas, las herramientas de Svelte te ahorran tiempo y esfuerzo mientras mantienen tu código limpio.