Conseil
Si vous aimez cette bibliothèque, veuillez envisager de soutenir son créateur.
React Awesome Reveal est une bibliothèque pour les applications React écrites dans TypeScript qui ajoute des animations révèlent en utilisant l'API d'observateur d'intersection pour détecter quand les éléments apparaissent dans la fenêtre. Les animations sont fournies en interne par émotion et implémentées sous forme d'animations CSS pour bénéficier de l'accélération matérielle.
Pour ajouter ce package en tant que dépendance à votre application, exécutez simplement
npm install react-awesome-reveal @emotion/react --saveOu, si vous utilisez du fil:
yarn add react-awesome-reveal @emotion/reactOu, si vous utilisez PNPM (comme je le suggère fortement):
pnpm add react-awesome-reveal @emotion/react Les effets d'importation à partir de React Awesome Reveal à votre composant React, par exemple l'effet Fade :
import { Fade } from "react-awesome-reveal" ;Ensuite, enveloppez simplement les composants que vous souhaitez animer:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > Les effets actuellement pris en charge sont Bounce , Fade , Flip , Hinge , JackInTheBox , Roll , Rotate , Slide et Zoom . Reportez-vous à la documentation Animate.CSS pour les détails.
Depuis la version 3, les animations de chercheur d'attention sont enveloppées par le composant AttentionSeeker , qui accepte un accessoire appelé effect qui spécifie l'animation à rendre (par défaut "bounce” ). Les effets pris en charge sont: ”bounce" , "flash" , " "headShake” "heartBeat" "jello” ", "pulse" , "rubberBand" , " “shake” , " “shakeX" , "shakeY” , "swing” , "tada" et “wobble” .
Encore une fois, reportez-vous à la documentation Animate.CSS pour les détails.
Vous pouvez transmettre les accessoires suivants aux composants d'animation pour personnaliser le comportement:
| Soutenir | Description | Valeurs | Défaut |
|---|---|---|---|
cascade | S'il est défini, chaque enfant d'une animation de révélation reçoit automatiquement un délai qui prend en compte son prédécesseur (l'enfant i entre dans la fenêtre après que i * delay * damping les millisecondes) - utile pour l'animation des éléments de liste. | true ou false | false |
damping | Facteur qui affecte le retard que chaque composant animé dans une animation en cascade sera attribué. Si damping = 1 , le retard sera égal à la durée d'animation; Si damping < 1 , le retard sera inférieur à la durée de l'animation; Si damping > 1 , le retard sera supérieur à la durée de l'animation. | number | 0.5 (ce qui signifie que le retard sera la moitié de la durée de l'animation) |
direction | Origine de l'animation (le cas échéant). | Généralement "down" , "left" , "right" ou "up" , à quelques exceptions documentées dans le code | undefined |
delay | Il est temps d'attendre avant le début de l'animation (en millisecondes). | number | 0 |
duration | La durée d'animation (millisecondes). | number | 1000 |
fraction | Combien un élément doit être dans la fenêtre avant que l'animation ne soit déclenchée. | number entre 0 et 1 | 0 |
triggerOnce | Spécifie si l'animation ne doit fonctionner qu'une seule ou chaque fois qu'un élément entre / sort / rentre dans la fenêtre. | true ou false | false |
className | Les noms de classe à ajouter à l'élément de conteneur. | string | undefined |
style | Les styles en ligne à ajouter à l'élément de conteneur. | React.CSSProperties | undefined |
childClassName | Les noms de classe à ajouter à l'élément enfant. | string | undefined |
childStyle | Les styles en ligne à ajouter à l'élément enfant. | React.CSSProperties | undefined |
onVisibilityChange | Rappel exécuté lorsque l'élément entre ou quitte la fenêtre. Si plus d'un élément est animé, cette fonction est appelée sur chaque élément. | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
Pour déclencher l'animation seulement la première fois qu'un élément entre dans la fenêtre:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > Pour enchaîner plusieurs animations, définissez l'hélice cascade sur true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Jouez avec l'hélice damping pour modifier le retard par lequel chaque enfant apparaîtra progressivement:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > À partir de la version 3.2.0, vous pouvez définir des animations personnalisées! Importez simplement le composant Reveal (qui est l'exportation par défaut de la bibliothèque - donnez-lui le nom que vous souhaitez) et passez-lui un accessoire 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 aucun accessoire keyframes n'est passé, l'animation rendue par défaut est une entrée décollée de la gauche (équivalent à <Fade direction="left">...</Fade> ).
Vous pouvez également passer ces accessoires pour Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName et childClassNamestyle et childStyleonVisibilityChangeL'observateur d'intersection est l'API utilisée pour déterminer si un élément se trouve à l'intérieur de la fenêtre ou non. La prise en charge du navigateur est vraiment bonne - avec Safari ajoutant un support en 12.1, tous les principaux navigateurs prennent désormais en charge les observateurs d'intersection nativement.
Si vous avez besoin de prendre en charge les anciens navigateurs, ajoutez le polyfill pour l'API d'observateur d'intersection.
Vous pouvez ajouter le polyfill directement ou utiliser un service comme PolyFill.io pour l'ajouter en cas de besoin.
yarn add intersection-observerPuis l'importez-le dans votre application:
import "intersection-observer" ;Si vous utilisez WebPack (ou similaire), vous pouvez utiliser des importations dynamiques pour charger le polyfill uniquement si nécessaire. Une implémentation de base pourrait ressembler à ceci:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} Pour voir la documentation des versions précédentes, parcourez les balises passées dans le référentiel de projet du GitHub et lisez la lecture de cette version spécifique.
Le code source du projet est autorisé sous la licence MIT. Vous êtes libre de déborder ce référentiel, de modifier le code, de partager et de l'utiliser à la fois à des fins non commerciales et commerciales.
