Consejo
Si le gusta esta biblioteca, considere apoyar a su creador.
React Awesome Reveal es una biblioteca para las aplicaciones React escritas en TypeScript que agrega animaciones reveladas utilizando la API de observador de intersección para detectar cuándo aparecen los elementos en la ventana gráfica. Las animaciones son proporcionadas internamente por la emoción e implementadas como animaciones CSS para beneficiarse de la aceleración de hardware.
Para agregar este paquete como dependencia a su aplicación, simplemente ejecute
npm install react-awesome-reveal @emotion/react --saveO, si estás usando hilo:
yarn add react-awesome-reveal @emotion/reactO, si está usando PNPM (como sugiero encarecidamente):
pnpm add react-awesome-reveal @emotion/react Efectos de importación de React Awesome Revelar a su componente React, por ejemplo, el efecto Fade :
import { Fade } from "react-awesome-reveal" ;Luego, simplemente envuelva los componentes que desea animar:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > Los efectos actualmente admitidos son Bounce , Fade , Flip , Hinge , JackInTheBox , Roll , Rotate , Slide and Zoom . Consulte la documentación Animate.css para obtener los detalles.
Desde la versión 3, las animaciones de los buscadores de atención están envueltas por el componente de AttentionSeeker , que acepta un accesorio llamado effect que especifica la animación para renderizar (predeterminado "bounce” ). Los efectos admitidos son: ”bounce" , "flash" , "headShake” ", "jello” "heartBeat" ", "Jello", "pulse" , "rubberBand" , " “shake” , “shakeX" , "shakeY” , "swing” , "tada" y “wobble” .
Nuevamente, consulte la documentación Animate.css para obtener los detalles.
Puede pasar los siguientes accesorios a los componentes de animación para personalizar el comportamiento:
| Apuntalar | Descripción | Valores | Por defecto |
|---|---|---|---|
cascade | Si se establece, a cada hijo de una animación reveladora se le asigna automáticamente un retraso que tiene en cuenta a su predecesor (niño i ingreso en la ventana gráfica después de i * delay * damping ), útil para animar elementos de la lista. | true o false | false |
damping | Factor que afecta el retraso de que se asignará cada componente animado en una animación en cascada. Si damping = 1 , el retraso será igual a la duración de la animación; Si damping < 1 , el retraso será menor que la duración de la animación; Si damping > 1 , el retraso será mayor que la duración de la animación. | number | 0.5 (lo que significa que el retraso será la mitad de la duración de la animación) |
direction | Origen de la animación (donde corresponda). | Por lo general, "down" , "left" , "right" o "up" , con algunas excepciones documentadas en el código | undefined |
delay | Es hora de esperar antes de que comience la animación (en milisegundos). | number | 0 |
duration | La duración de la animación (milisegundos). | number | 1000 |
fraction | Cuánto debe ser un elemento en la ventana gráfica antes de que se active la animación. | number entre 0 y 1 | 0 |
triggerOnce | Especifica si la animación debe ejecutarse solo una vez o cada vez que un elemento ingrese/salga/vuelva a entrar en la ventana gráfica. | true o false | false |
className | Los nombres de clase para agregar al elemento contenedor. | string | undefined |
style | Los estilos en línea para agregar al elemento contenedor. | React.CSSProperties | undefined |
childClassName | Los nombres de clase para agregar al elemento infantil. | string | undefined |
childStyle | Los estilos en línea para agregar al elemento infantil. | React.CSSProperties | undefined |
onVisibilityChange | La devolución de llamada ejecutada cuando el elemento entra o sale de la ventana gráfica. Si se anima más de un elemento, esta función se llama en cada elemento. | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
Para activar la animación solo la primera vez que un elemento ingresa a la ventana gráfica:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > Para encadenar múltiples animaciones, configure el accesorio cascade en true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Juega con el accesorio damping para alterar el retraso por el cual cada niño aparecerá progresivamente:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > A partir de la versión 3.2.0, ¡puede definir animaciones personalizadas! Simplemente importe el componente Reveal (que es la exportación predeterminada de la biblioteca: dale el nombre que desee) y pase un apoyo keyframes :
import React from "react" ;
import Reveal from "react-awesome-reveal" ;
import { keyframes } from "@emotion/react" ;
const customAnimation = keyframes `
from {
opacity: 0;
transform: translate3d(-200px, -100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
` ;
function CustomAnimation ( { children } ) {
return < Reveal keyframes = { customAnimation } > { children } </ Reveal > ;
} Si no se pasa el apoyo keyframes , la animación renderizada predeterminada es una entrada que se desvanece desde la izquierda (equivalente a <Fade direction="left">...</Fade> ).
También puede pasar estos accesorios para Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName and childClassNamestyle y childStyleonVisibilityChangeEl observador de intersección es la API utilizada para determinar si un elemento está dentro de la ventana gráfica o no. El soporte del navegador es realmente bueno, con Safari agregando soporte en 12.1, todos los principales navegadores ahora admiten observadores de intersección de forma nativa.
Si necesita admitir navegadores antiguos, agregue el polyfill para la API del observador de intersección.
Puede agregar el polyfill directamente o usar un servicio como PolyFill.io para agregarlo cuando sea necesario.
yarn add intersection-observerLuego importárelo en su aplicación:
import "intersection-observer" ;Si está utilizando webpack (o similar), puede usar importaciones dinámicas para cargar el polyfill solo si es necesario. Una implementación básica podría verse algo así:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} Para ver la documentación de versiones anteriores, navegue a través de etiquetas pasadas en el repositorio de proyectos de GitHub y lea el ReadMe para esa versión específica.
El código fuente del proyecto tiene licencia bajo la licencia MIT. Usted es libre de desembolsar este repositorio, editar el código, compartirlo y usarlo tanto para fines no comerciales como comerciales.
