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. 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. <AnimateIn/> Schauen wir uns an, wie es verwendet wird. Definieren Sie nach dem Importieren der Komponente „ - und „ -Zustände mit Tailwind-Klassen. Wickeln Sie das Zielelement in ein, um zu sehen, wie die Animation zum Leben erweckt wird. from to <AnimateIn/> 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 verwendet, um einen Gleiteffekt in Kombination mit einer Einblendung zu erzeugen. So trägt jede Eigenschaft zur Animation bei: <AnimateIn/> Eigenschaft: Durch Festlegen weisen wir AnimateIn an, die Animation als -Element zu rendern. as as="h1" <h1> und Eigenschaften: Die Eigenschaft startet die Überschrift außerhalb des Bildschirms ( , verschiebt sie um 32 Einheiten nach unten) und unsichtbar ( ). Die Eigenschaft bringt die Überschrift dann an ihre endgültige Position (zurück zu ) und macht sie vollständig sichtbar ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 : Die Animation beginnt sofort und ohne Verzögerung und läuft für kurze 300 ms. duration Eigenschaft: Die wendet die Utility-Klasse von Tailwind an, um die Schriftgröße festzulegen, wodurch die Überschrift deutlich hervorsticht. className className="text-4xl" Eigenschaft: Die benutzerdefinierte ( ) verleiht der Animation eine einzigartige Leichtigkeit und verleiht ihr einen hüpfenden Effekt. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) Der Untertitel verwendet verschiedene Animationen, um die Überschrift zu ergänzen und so einen zusammenhängenden visuellen Fluss zu schaffen. Eigenschaft: Hier rendert die Komponente als -Element, geeignet für einen Untertitel. as as="h2" <h2> und Eigenschaften: Der Untertitel wird zunächst auf Null verkleinert ( ) und unsichtbar ( ), dann auf seine natürliche Größe vergrößert ( ) und vollständig sichtbar ( ). Dieser Skalierungseffekt, gepaart mit einer Einblendung, verleiht der Animation Tiefe. from to scale-0 opacity-0 scale-100 opacity-100 und : 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. delay duration Eigenschaft: Der legt die Schriftgröße des Untertitels fest, wodurch er kleiner als die Überschrift, aber immer noch aussagekräftig ist. className className="text-lg" Um besser zu verstehen, was passiert, schauen wir uns den Quellcode für an: <AnimateIn/> auf Github verwendet einen Hook, um den Animationsstatus mit der -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. <AnimateIn/> useState from Der erste Hook in der Komponente dient dazu, Benutzerpräferenzen für reduzierte Bewegung zu berücksichtigen. Durch das Abhören der Medienabfrage 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 Eigenschaft gesetzt wird, was ein zugängliches Erlebnis ermöglicht. useEffect (prefers-reduced-motion: reduce) to Der zweite 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 anfänglichen Wert endgültigen Wert ändert. Dieser Übergang erzeugt den visuellen Effekt einer Animation. useEffect from to 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 ist der Rendering-Mechanismus der Komponente. Es erstellt dynamisch ein HTML-Element basierend auf der Requisite und ermöglicht so die Verwendung der Komponente über verschiedene HTML-Elemente hinweg. Der wird mithilfe der Funktion erstellt, die die Dienstprogrammklassen von Tailwind, den als Requisite übergebenen benutzerdefinierten und den aktuellen Animationsstatus kombiniert. Durch diese dynamische Klassenzuweisung werden die gewünschten Stile und Übergänge auf das Element angewendet. React.createElement as className von shadcn populär gemachten cn className Darüber hinaus gibt es ein , das übergeben werden kann, um Stileigenschaften direkt im Animationscontainer festzulegen. Die wird basierend auf der Requisite festgelegt, wechselt jedoch intelligent auf , wenn der Benutzer eine reduzierte Bewegung bevorzugt, wodurch die Animation effektiv deaktiviert wird, während die Funktionalität der Komponente erhalten bleibt. style transitionDuration duration 0ms Wenn Sie in Ihrem eigenen Projekt verwenden möchten und es bereits verwendet, dann haben Sie bereits alles, was Sie brauchen. Laden Sie einfach und fügen Sie es Ihren Komponenten hinzu. <AnimateIn/> shadcn AnimateIn.tsx herunter Andernfalls sollten Sie sowie das zum Zusammenführen von Tailwind-Klassen, installieren. Tailwind mxcn hilfreiche Dienstprogramm 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 eine schöne Demoseite zusammengestellt, auf der Sie mit der Erstellung verschiedener Animationen mit experimentieren können. animate-in.vercel.app <AnimateIn/> Auch veröffentlicht hier
