Ich habe eine React-Utility-Komponente für Animationen mit Tailwind und CSS erstellt: AnimateIn

Ich verwende in meinen Projekten seit einiger Zeit dasselbe Animationsmuster, um Elemente auf dem Bildschirm zu animieren. In der einfachsten Form würden Sie ein Element mit einer Deckkraft von Null formatieren und dann den Stil ändern, um eine Deckkraft von eins mit einem CSS-Übergang von einer Sekunde zu erhalten.

Darauf können wir aufbauen, indem wir weitere Übergangseigenschaften hinzufügen, die Dauer ändern, eine Verzögerung hinzufügen oder eine benutzerdefinierte Beschleunigung festlegen.

<AnimateIn/> ist eine wiederverwendbare React-Komponente, die ich jederzeit einsetzen kann, wenn ich meinen Projekten schnell einige Animationseffekte hinzufügen möchte. Als einfache Hilfskomponente kombiniert sie CSS-Animation mit Tailwind-Klassen, um mit minimalem Aufwand flüssige, auffällige Animationen zu erstellen.

Schauen wir uns an, wie es verwendet wird. Definieren Sie nach dem Importieren der Komponente „ from - und „ to -Zustände mit Tailwind-Klassen. Wickeln Sie das Zielelement in <AnimateIn/> ein, um zu sehen, wie die Animation zum Leben erweckt wird.

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

Hier ist ein etwas komplexeres Beispiel, das mehr Eigenschaften zum Animieren einer Überschrift und eines Untertitels verwendet.

 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>

Im Headline-Beispiel wird <AnimateIn/> verwendet, um einen Gleiteffekt in Kombination mit einer Einblendung zu erzeugen. So trägt jede Eigenschaft zur Animation bei:

• as Eigenschaft: Durch Festlegen as="h1" weisen wir AnimateIn an, die Animation als <h1> -Element zu rendern.

• from und to Eigenschaften: Die from Eigenschaft startet die Überschrift außerhalb des Bildschirms ( translate-y-32 , verschiebt sie um 32 Einheiten nach unten) und unsichtbar ( opacity-0 ). Die to Eigenschaft bringt die Überschrift dann an ihre endgültige Position (zurück zu translate-y-0 ) und macht sie vollständig sichtbar ( opacity-100 ).

• duration : Die Animation beginnt sofort und ohne Verzögerung und läuft für kurze 300 ms.

• className Eigenschaft: Die className="text-4xl" wendet die Utility-Klasse von Tailwind an, um die Schriftgröße festzulegen, wodurch die Überschrift deutlich hervorsticht.

• style Eigenschaft: Die benutzerdefinierte transitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) verleiht der Animation eine einzigartige Leichtigkeit und verleiht ihr einen hüpfenden Effekt.

Der Untertitel verwendet verschiedene Animationen, um die Überschrift zu ergänzen und so einen zusammenhängenden visuellen Fluss zu schaffen.

• as Eigenschaft: Hier rendert as="h2" die Komponente als <h2> -Element, geeignet für einen Untertitel.

• from und to Eigenschaften: Der Untertitel wird zunächst auf Null verkleinert ( scale-0 ) und unsichtbar ( opacity-0 ), dann auf seine natürliche Größe vergrößert ( scale-100 ) und vollständig sichtbar ( opacity-100 ). Dieser Skalierungseffekt, gepaart mit einer Einblendung, verleiht der Animation Tiefe.

• delay und duration : Der Untertitel startet auch nach einer Verzögerung von 800 ms, sodass er beginnt, nachdem die Überschrift vollständig animiert ist. Dieser gestaffelte Ansatz stellt sicher, dass jedes Element seinen Fokus erhält.

• className Eigenschaft: Der className="text-lg" legt die Schriftgröße des Untertitels fest, wodurch er kleiner als die Überschrift, aber immer noch aussagekräftig ist.

Um besser zu verstehen, was passiert, schauen wir uns den Quellcode für <AnimateIn/> auf Github an:

<AnimateIn/> verwendet einen useState Hook, um den Animationsstatus mit der from -Eigenschaft zu initialisieren, bei der es sich um eine oder mehrere Tailwind-Dienstprogrammklassen handeln sollte, um die Bühne für den Startpunkt der Animation festzulegen, bevor eine Animation stattfindet.

Der erste useEffect Hook in der Komponente dient dazu, Benutzerpräferenzen für reduzierte Bewegung zu berücksichtigen. Durch das Abhören der Medienabfrage (prefers-reduced-motion: reduce) basiert das Animationsverhalten auf den Systemeinstellungen des Benutzers. Wenn eine reduzierte Bewegung bevorzugt wird, wird die Animation vollständig übersprungen, wodurch der Animationsstatus direkt auf die to Eigenschaft gesetzt wird, was ein zugängliches Erlebnis ermöglicht.

Der zweite useEffect Hook ist der Ort, an dem sich die Animationslogik befindet. Wenn der Benutzer keine Präferenz für reduzierte Bewegung angegeben hat, stellt die Komponente einen Timer ein, der den Animationsstatus nach der angegebenen Verzögerung from anfänglichen Wert to endgültigen Wert ändert. Dieser Übergang erzeugt den visuellen Effekt einer Animation.

Die Bereinigungsfunktion dieses Hooks (die Return-Anweisung) löscht den Timer und verhindert so potenzielle Speicherlecks, z. B. wenn die Bereitstellung der Komponente vor Abschluss der Animation aufgehoben wird.

Der Funktionsaufruf React.createElement ist der Rendering-Mechanismus der Komponente. Es erstellt dynamisch ein HTML-Element basierend auf der as Requisite und ermöglicht so die Verwendung der Komponente über verschiedene HTML-Elemente hinweg. Der className wird mithilfe der von shadcn populär gemachten cn Funktion erstellt, die die Dienstprogrammklassen von Tailwind, den als Requisite übergebenen benutzerdefinierten className und den aktuellen Animationsstatus kombiniert. Durch diese dynamische Klassenzuweisung werden die gewünschten Stile und Übergänge auf das Element angewendet.

Darüber hinaus gibt es ein style , das übergeben werden kann, um Stileigenschaften direkt im Animationscontainer festzulegen. Die transitionDuration wird basierend auf der Requisite duration festgelegt, wechselt jedoch intelligent auf 0ms , wenn der Benutzer eine reduzierte Bewegung bevorzugt, wodurch die Animation effektiv deaktiviert wird, während die Funktionalität der Komponente erhalten bleibt.

Wenn Sie <AnimateIn/> in Ihrem eigenen Projekt verwenden möchten und es bereits shadcn verwendet, dann haben Sie bereits alles, was Sie brauchen. Laden Sie einfach AnimateIn.tsx herunter und fügen Sie es Ihren Komponenten hinzu.

Andernfalls sollten Sie Tailwind sowie mxcn das hilfreiche Dienstprogramm zum Zusammenführen von Tailwind-Klassen, installieren.

Wie shadcn soll <AnimateIn/> eine wiederverwendbare Komponente sein, die Sie kopieren und in Ihre Apps einfügen und an Ihre Bedürfnisse anpassen können. Der Code gehört Ihnen.

Außerdem habe ich unter animate-in.vercel.app eine schöne Demoseite zusammengestellt, auf der Sie mit der Erstellung verschiedener Animationen mit <AnimateIn/> experimentieren können.

Auch hier veröffentlicht