Parámetros de transición: node, duration y delay
Acepte un nodo y un objeto de parámetros en su función de transición para aportar flexibilidad
Parámetros de transición: node, duration y delay 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.
Firma de la función
Las transiciones personalizadas aceptan (node, params) para ofrecer flexibilidad.
Lectura de node
Utilice node para calcular propiedades como su tamaño o posición actuales.
const rect = node.getBoundingClientRect();Pase parámetros
El consumidor pasa params mediante la directiva.
<p transition:spin={{ duration: 800 }}>...Valores predeterminados
Gestione la ausencia de parámetros con valores predeterminados dentro de la función.
function spin(node, { duration = 600 } = {}) { ... }Parámetros reactivos
Los cambios de parámetros no vuelven a ejecutar una transición en curso; el siguiente montaje utiliza el nuevo valor.
Duración calculada
Puede calcular la duración a partir de los datos, como la longitud de una palabra para efectos de máquina de escribir.
Parámetro de easing
Acepte un parámetro de easing para que los consumidores puedan personalizar la curva.
Parámetro de retraso
Haga que las entradas sean escalonadas pasando un retraso derivado de un índice.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}Consejos para cadenas CSS
Devuelva transformaciones componibles; evite propiedades que provoquen recálculos del diseño, como top/left.
Rendimiento
Limítese a transform y opacity para obtener animaciones muy fluidas.
Pruebas
Inspeccione los estilos calculados durante una transición con las DevTools del navegador.
Comprobación rápida
¿Qué proporciona el objeto params?
Resumen
Acepte y utilice params para crear transiciones flexibles. Proporcione valores predeterminados para los valores ausentes.
Preguntas frecuentes
¿La lección «Parámetros de transición: node, duration y delay» es gratis?
Sí — el texto completo de «Parámetros de transición: node, duration y delay» 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: node, duration y delay»?
Acepte un nodo y un objeto de parámetros en su función de transición para aportar flexibilidad 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: node, duration y delay»?
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
- Escritura de una función de transición personalizada
- Parámetros de transición: node, duration y delay
- Creación de una transición morphing
- Transiciones CSS y JavaScript