React UX: Dominando el fundido

Mejora de la experiencia del usuario de React

Nuestras aplicaciones siempre se mueven de una pantalla a otra, arrojando datos constantemente al usuario. Hoy veremos cómo podemos manejar estas transiciones en la mansión más elegante y hermosa.

Echemos un vistazo al ejemplo anterior y posterior. En el ejemplo anterior, la pantalla de bienvenida aparece inmediatamente, sin animación, sin transición, simplemente sentado allí. Feo. Luego hacemos clic en nuestra bandeja de entrada y obtenemos una transición rígida directamente a algunos mensajes. Realmente no disfruto usar la aplicación de esta persona, simplemente se siente básica.
Por otro lado, cuando mire el ejemplo siguiente, trate de prestar atención a los primeros milisegundos del GIF. El presente se abre con una animación corta y emocionante, luego el texto de bienvenida y el botón se desvanecen desde la parte inferior de la pantalla. Suave. Una vez que hago clic en la bandeja de entrada, los mensajes se desvanecen elegantemente para verlos, deslizándose en sus lugares uno por uno. Bien.

Esto es increíblemente fácil de implementar

Gracias a una biblioteca útil, react-fade-in, no tienes que lidiar con ningún CSS. Simplemente envuelva CUALQUIER componente con un & lt; FadeIn & gt; etiqueta, y animará automáticamente a cada niño, uno por uno. También puede envolver el padre con & lt; FadeIn & gt; y animará todo como un bloque.

La etiqueta & lt; FadeIn & gt; El componente puede tener dos accesorios:

delay : Predeterminado: 50. Retraso entre la animación de cada niño en milisegundos.

transitionDuration : Predeterminado: 400. Duración de la animación de cada niño en milisegundos.

el retraso debe reducirse cuando se trabaja con listas largas

La duración de la transición se puede aumentar para obtener un desvanecimiento lento agradable

Esta pequeña y sencilla adición ayudará a mejorar la experiencia del usuario de su aplicación.

Esta táctica se puede utilizar para desvanecer texto, imágenes, listas y cualquier otro componente de React que se te ocurra. Incluso puedes incluir toda tu aplicación en un & lt; FadeIn & gt ;!

Implementación de Fade In, paso a paso

npx create-react-app fade

cd fade

npm i reacciono-fade-in

Editar App.js:

Para más React UX: