He estado usando el mismo patrón de animación en mis proyectos desde hace un tiempo para animar elementos en la pantalla. En su forma más simple, tendría un elemento con un estilo con opacidad de cero, luego cambiaría el estilo para que tenga una opacidad de uno con una transición CSS de un segundo. Podemos aprovechar eso agregando otras propiedades que realicen la transición, cambiando la duración, agregando un retraso o configurando una aceleración personalizada. es un componente reutilizable de React que he creado para incluirlo cada vez que quiero agregar rápidamente algunos efectos de animación a mis proyectos. Un componente de utilidad simple que combina animación CSS con clases Tailwind para crear animaciones fluidas y llamativas con el mínimo esfuerzo. <AnimateIn/> Echemos un vistazo a cómo se usa. Después de importar el componente, defina y los estados con clases Tailwind. Envuelva el elemento de destino dentro de para ver cómo la animación cobra vida. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> A continuación se muestra un ejemplo un poco más complejo que utiliza más propiedades para animar un título y un subtítulo. import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> En el ejemplo del título, se utiliza para crear un efecto deslizante combinado con un desvanecimiento. Así es como cada propiedad contribuye a la animación: <AnimateIn/> propiedad: al establecer , le decimos a AnimateIn que represente la animación como un elemento . as as="h1" <h1> Propiedades y : La propiedad inicia el título fuera de la pantalla ( , moviéndolo 32 unidades hacia abajo) e invisible ( ). La propiedad luego lleva el título a su posición final (de nuevo a ) y lo hace completamente visible ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 Propiedad : la animación está configurada para comenzar inmediatamente sin demora y se ejecuta durante 300 ms. duration Propiedad : aplica la clase de utilidad de Tailwind para establecer el tamaño de fuente, haciendo que el título se destaque de manera destacada. className className="text-4xl" Propiedad : la ( ) agrega una facilidad única a la animación, dándole un efecto de rebote. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) El subtítulo utiliza un conjunto diferente de animaciones para complementar el título, creando un flujo visual coherente. propiedad : aquí, representa el componente como un elemento , adecuado para un subtítulo. as as="h2" <h2> propiedades y : el subtítulo comienza reducido a cero ( ) e invisible ( ), luego aumenta a su tamaño natural ( ) y se vuelve completamente visible ( ). Este efecto de escala, combinado con un desvanecimiento, agrega profundidad a la animación. from to scale-0 opacity-0 scale-100 opacity-100 Propiedades y : el subtítulo también comienza después de un retraso de 800 ms, por lo que comienza después de que el título se haya animado por completo. Este enfoque escalonado garantiza que cada elemento tenga su momento de atención. delay duration Propiedad : establece el tamaño de fuente del subtítulo, haciéndolo más pequeño que el título pero aún significativo. className className="text-lg" Para comprender mejor lo que está sucediendo, veamos el código fuente de : <AnimateIn/> en Github utiliza un gancho para inicializar el estado de la animación con la propiedad , que debe ser una o más clases de utilidad Tailwind, preparando el escenario para el punto de inicio de la animación antes de que se realice cualquier animación. <AnimateIn/> useState from El primer gancho en el componente es para respetar las preferencias del usuario en cuanto a movimiento reducido. Al escuchar la consulta de medios , el comportamiento de la animación se basa en la configuración del sistema del usuario. Si se prefiere el movimiento reducido, la animación se omite por completo, estableciendo directamente el estado de la animación en la propiedad , lo que permite una experiencia accesible. useEffect (prefers-reduced-motion: reduce) to El segundo gancho es donde reside la lógica de la animación. Si el usuario no ha indicado una preferencia por el movimiento reducido, el componente configura un temporizador que cambia el estado de la animación el valor inicial el valor final después del retraso especificado. Esta transición crea el efecto visual de la animación. useEffect from to La función de limpieza de este enlace (la declaración de retorno) borra el temporizador, evitando posibles pérdidas de memoria, como si el componente se desmontara antes de que se complete la animación. La llamada a la función es el mecanismo de representación del componente. Crea dinámicamente un elemento HTML basado en el accesorio , lo que permite el uso del componente en diferentes elementos HTML. El se construye utilizando la función , que combina las clases de utilidad de Tailwind, el personalizado pasado como accesorio y el estado de animación actual. Esta asignación de clase dinámica es la que aplica los estilos y transiciones deseados al elemento. React.createElement as className cn popularizada por shadcn className Además, hay un atributo que se puede pasar para establecer directamente propiedades de estilo en el contenedor de animación. La se establece en función de la , pero cambia de forma inteligente a si el usuario prefiere un movimiento reducido, lo que desactiva efectivamente la animación mientras se mantiene la funcionalidad del componente. style transitionDuration duration 0ms Si desea utilizar en su propio proyecto y ya usa , entonces ya tiene todo lo que necesita, simplemente y agréguelo a sus componentes. <AnimateIn/> shadcn descargue AnimateIn.tsx De lo contrario, querrás y la para fusionar clases de tailwind. instalar Tailwind mxcn útil utilidad Al igual que shadcn, <AnimateIn/> está pensado para ser un componente reutilizable que puedes copiar y pegar en tus aplicaciones y personalizar según tus necesidades. El código es tuyo. Además, he creado una bonita página de demostración para jugar a crear diferentes animaciones con en . <AnimateIn/> animate-in.vercel.app También publicado aquí

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

Creé un componente de utilidad React para animaciones con Tailwind y CSS: AnimateIn

Demasiado Largo; Para Leer

John Polacek

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Creé un componente de utilidad React para animaciones con Tailwind y CSS: AnimateIn

Demasiado Largo; Para Leer

John Polacek

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS