Parámetros de transición: duration, delay y easing
Personalice las transiciones pasando los parámetros duration, delay y easing
Parámetros de transición: duration, delay y easing es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
El objeto de parámetros
Todas las transiciones aceptan un objeto de opciones como segundo argumento.
<p transition:fade={{ duration: 600, delay: 200 }}>duration
Duración total de la animación en milisegundos. El valor predeterminado es 400 ms.
delay
Espera antes de iniciar la animación. Es útil para interfaces secuenciadas.
easing
Función que transforma el progreso lineal (0..1) en una curva personalizada. De forma predeterminada, es lineal.
Funciones de easing integradas
Importe desde svelte/easing: linear, quadIn, cubicOut, elasticOut, etc.
import { elasticOut } from "svelte/easing";Opciones por transición
Cada transición tiene sus propios parámetros. Fly añade x e y; scale añade start.
Elegir las duraciones
Use duraciones cortas (100-200 ms) para microinteracciones y más largas (400-700 ms) para transiciones de página.
Parámetros reactivos
Los valores de los parámetros pueden depender del estado reactivo.
<p transition:fly={{ x: dir * 200 }}>...Comportamiento predeterminado
Si omite el objeto de parámetros, se aplican valores predeterminados razonables.
Adaptarse al diseño
Ajuste la duración y el easing hasta que el movimiento sea adecuado; pruébelo en un dispositivo real.
Accesibilidad
Respete prefers-reduced-motion reduciendo la duración u omitiendo las transiciones.
Comprobación rápida
¿De dónde proceden las funciones de easing?
Repaso
Ajuste duration, delay y easing (de svelte/easing) para conseguir el efecto adecuado.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Parámetros de transición: duration, delay y easing» es gratis?
Sí — el texto completo de «Parámetros de transición: duration, delay y easing» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Parámetros de transición: duration, delay y easing»?
Personalice las transiciones pasando los parámetros duration, delay y easing Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Parámetros de transición: duration, delay y easing»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- transition:fade y transition:fly
- Parámetros de transición: duration, delay y easing
- in: y out: para transiciones asimétricas
- transition:draw para trazados SVG