Tipp
Wenn Sie diese Bibliothek mögen, sollten Sie den Schöpfer unterstützen.
React Awesome Discover ist eine Bibliothek für React -Apps, die in TypeScript geschrieben wurden und die Animationen mit der Schnittpassungs -Observer -API hinzufügen, um festzustellen, wann die Elemente im Ansichtsfenster angezeigt werden. Animationen werden intern von Emotionen bereitgestellt und als CSS -Animationen implementiert, um von der Beschleunigung der Hardware zu profitieren.
Um dieses Paket als Abhängigkeit zu Ihrer App hinzuzufügen, führen Sie einfach aus
npm install react-awesome-reveal @emotion/react --saveOder wenn Sie Garn verwenden:
yarn add react-awesome-reveal @emotion/reactOder wenn Sie PNPM verwenden (wie ich stark vorschlage):
pnpm add react-awesome-reveal @emotion/react Importeffekte von React Awesome zeigen Ihre React -Komponente, zum Beispiel den Fade -Effekt:
import { Fade } from "react-awesome-reveal" ;Wickeln Sie dann einfach die Komponenten ein, die Sie animieren möchten:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > Die derzeit unterstützten Effekte sind Bounce , Fade , Flip , Hinge , JackInTheBox , Roll , Rotate , Slide und Zoom . In der Dokumentation von Animate.css finden Sie die Details.
Seit Version 3 werden die Aufmerksamkeitssekeranimationen von der AttentionSeeker abgeschlossen, die eine Requisite namens effect akzeptiert, die die Animation für das Rendern angibt (Standardeinstellungen zu "bounce” ). Die unterstützten Effekte sind: ”bounce" , "flash" , "headShake” , "jello” "heartBeat" ", "Jello", "pulse" , "rubberBand" , “shake” , “shakeX" , "shakeY” , "swing” , "tada" und “wobble” .
Weitere Informationen finden Sie in der Dokumentation von Animate.css.
Sie können die folgenden Requisiten an die Animationskomponenten weitergeben, um das Verhalten anzupassen:
| Stütze | Beschreibung | Werte | Standard |
|---|---|---|---|
cascade | Wenn festgelegt wird, wird jedes Kind einer Enthüllung Animation automatisch eine Verzögerung zugewiesen, die seinen Vorgänger berücksichtigt (Kind i betritt das Ansichtsfenster nach i * delay * damping Millisekunden) - nützlich für Animationslistenelemente. | true oder false | false |
damping | Faktor, der die Verzögerung beeinflusst, dass jede animierte Komponente in einer Kaskadenanimation zugewiesen wird. Wenn damping = 1 , ist die Verzögerung gleich der Animationsdauer; Wenn damping < 1 ist, ist die Verzögerung niedriger als die Animationsdauer; Wenn damping > 1 ist, ist die Verzögerung größer als die Animationsdauer. | number | 0.5 (was bedeutet, dass die Verzögerung die Hälfte der Animationsdauer beträgt) |
direction | Ursprung der Animation (gegebenenfalls zutreffend). | Normalerweise "down" , "left" , "right" oder "up" , mit einigen Ausnahmen, die im Code dokumentiert sind | undefined |
delay | Zeit zum Warten, bevor die Animation beginnt (in Millisekunden). | number | 0 |
duration | Die Animationsdauer (Millisekunden). | number | 1000 |
fraction | Wie viel sollte ein Element im Ansichtsfenster vorhanden sein, bevor die Animation ausgelöst wird. | number zwischen 0 und 1 | 0 |
triggerOnce | Gibt an, ob die Animation nur einmal oder jedes Mal ausgeführt werden soll, wenn ein Element in das Ansichtsfenster eingeht/verlässt/erneut eingeht. | true oder false | false |
className | Die Klassennamen, die dem Containerelement hinzugefügt werden sollen. | string | undefined |
style | Die Inline -Stile, die dem Containerelement hinzugefügt werden sollen. | React.CSSProperties | undefined |
childClassName | Die Klassennamen, die dem untergeordneten Element hinzugefügt werden sollen. | string | undefined |
childStyle | Die Inline -Stile, die dem untergeordneten Element hinzugefügt werden sollen. | React.CSSProperties | undefined |
onVisibilityChange | Rückruf ausgeführt, wenn das Element das Ansichtsfenster eingibt oder verlässt. Wenn mehr als ein Element animiert wird, wird diese Funktion jedes Element aufgerufen. | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
Um die Animation nur beim ersten Mal auszulösen, tritt ein Element in das Ansichtsfenster ein:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > Um mehrere Animationen miteinander zu ketten, stellen Sie die cascade -Requisite auf true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Spielen Sie mit der damping , um die Verzögerung zu ändern, durch die jedes Kind schrittweise erscheint:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Ab Version 3.2.0 können Sie benutzerdefinierte Animationen definieren! keyframes Reveal
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 > ;
} Wenn keine keyframes -Props übergeben wird, ist die Standardanimation ein verblassender Eingang von links (äquivalent zu <Fade direction="left">...</Fade> ).
Sie können diese Requisiten auch verabschieden, um zu Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName und childClassNamestyle und childStyleonVisibilityChangeDer Intersection -Beobachter ist die API, mit der festgestellt wird, ob sich ein Element im Ansichtsfenster befindet oder nicht. Die Browserunterstützung ist wirklich gut - da Safari in 12.1 Unterstützung hinzufügt, unterstützen alle wichtigen Browser nun die Intersektionsbeobachter nativ.
Wenn Sie alte Browser unterstützen müssen, fügen Sie die Polyfill für die Schnittbeobachter -API hinzu.
Sie können das Polyfill direkt hinzufügen oder einen Dienst wie Polyfill.io verwenden, um sie bei Bedarf hinzuzufügen.
yarn add intersection-observerImportieren Sie es dann in Ihre App:
import "intersection-observer" ;Wenn Sie WebPack (oder ähnliches) verwenden, können Sie dynamische Importe verwenden, um die Polyfill nur bei Bedarf zu laden. Eine grundlegende Implementierung könnte ungefähr so aussehen:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} Um die Dokumentation für frühere Versionen anzuzeigen, navigieren Sie durch frühere Tags im Projektrepository des Github und lesen Sie die Readme für diese bestimmte Version.
Der Projektquellcode ist unter der MIT -Lizenz lizenziert. Sie können dieses Repository freigeben, den Code bearbeiten, diese freigeben und verwenden, die sowohl für nichtkommerzielle als auch für kommerzielle Zwecke verwendet werden.
