Sinn für Reaktionen machen

Die Implementierung von React Animation war schon immer ein schwieriger Punkt in der Entwicklung. In diesem Artikel wird React-Spraing in einer leicht verständlichen Weise eingeführt und einige praktische Anwendungsfälle untersucht. Während React-Sting nicht die einzige Animationsbibliothek von React ist, ist sie eine der beliebtesten und mächtigsten Bibliotheken.

In diesem Artikel wird die neueste 9.x -Version verwendet (Release -Kandidatenversion zum Zeitpunkt des Schreibens). Wenn es zum Zeitpunkt des Lesens dieses Artikels nicht offiziell veröffentlicht wurde, verwenden Sie bitte react-spring@next der Installation. Nach meiner Erfahrung und dem Hauptbetrieb ist der Code sehr stabil. Das einzige Problem, das ich hatte, ist ein kleiner Fehler, wenn ich mit dem Parallelitätsmodus verwendet wird, der in einem Github -Repository verfolgt werden kann.

React-Spring schnell aussehen

Bevor Sie sich mit praktischen Anwendungsfällen befassen, schauen wir uns einen kurzen Blick auf Quellen, hohe Animationen und Übergangsanimationen. Am Ende dieses Abschnitts wird eine laufbare Demonstration vorgelegt, sodass sich keine Sorgen über die Verwirrung machen muss, die Sie während des Prozesses begegnen können.

Federn

Betrachten wir den klassischen "Hello World" der Animation: das Verblassen in und aus Inhalt. Lassen Sie uns innehalten und darüber nachdenken, wie Sie ohne Animation wechseln und sich verstecken können. Es sieht so aus:

 Exportieren Sie Standardfunktionsfunktion app () {
  const [Show, setShowing] = useSestate (falsch);
  Zurückkehren (
    <div>
      <div style="{{" opacity: showing :>
        Dieser Inhalt wird verblassen und ausblenden
      </div>
      <button onclick="{()"> setShowing (val =>! val)}> umschaltet</button>
      <hr>
    </div>
  );
}

Einfach, aber langweilig. Wie beleben wir Veränderungen in der Deckkraft? Wäre es nicht schön, wenn wir die gewünschte Opazität deklarativ auf dem Zustand basierend auf dem Zustand festlegen könnten, aber diese Werte reibungslos animiert lassen können? Das ist es, was React-Still-Spring tut. React-Still-Spring kann als unser Mittelsmann betrachtet werden, der unsere sich ständig ändernden Stilwerte übernimmt, was zu einem reibungslosen Übergang zwischen den gewünschten Animationswerten führt. So was:

 const [showa, setshowa] = usustate (false);

const fadestyles = usespring ({{
  config: {... config.stiff},
  Von: {Opazität: 0},
  Zu: {
    Opazität: Showa? 1: 0
  }
});

Wir verwenden from , um den anfänglichen Stilwert anzugeben und den aktuellen Wert im to -Abschnitt gemäß dem aktuellen Zustand anzugeben. Der Rückgabewert fadeStyles enthält den tatsächlichen Stilwert, den wir auf den Inhalt anwenden. Wir müssen nur das Letzte tun ...

Sie könnten denken, Sie könnten das tun:

<div style="{fadeStyles}">
  ...
</div>

Aber das funktioniert nicht. Wir können keine normalen div verwenden, aber wir müssen React-Sprüche- div verwenden, die aus animated Export erstellt wurden. Dies mag verwirrend klingen, aber es bedeutet nur:

<animated.div style="{fadeStyles}">
  ...
</animated.div>

Das war's.

Hoch animiert

Abhängig von dem, was wir animieren, möchten wir möglicherweise, dass der Inhalt von null Höhe bis zu seiner Größe auf und ab gleitet, so dass sich der umgebende Inhalt reibungslos anpasst und fließt. Sie möchten vielleicht, dass wir den obigen Code einfach kopieren könnten, die Höhe ändert sich von Null zu Auto, aber leider können Sie ihn nicht auf automatische Höhe animieren. Dies funktioniert sowohl in normalen CSS als auch in React-Stunde. Stattdessen müssen wir die tatsächliche Höhe des Inhalts kennen und im to der Feder angeben.

Wir müssen dynamisch die Höhe eines jeden Inhalts erhalten, um seinen Wert an React-Spring zu übermitteln. Es stellt sich heraus, dass die Webplattform etwas speziell dafür entworfen hat: ResizeObserver . Und seine Unterstützung ist eigentlich ziemlich gut! Da wir React verwenden, werden wir die Verwendung natürlich in einen Haken einwickeln. Mein Haken sieht so aus:

 Exportfunktion UseDeight ({on = true / * Kein Wert bedeutet auf * /} = {} wie alle) {{
  const ref = useref<any> ();
  const [Höhe, gesetzt] = UsSestate (0);
  const heigglef = useref (Höhe);
  const [ro] = usustate (
    () =>
      NEUE RESIZEOBSERVER (PACKET => {
        if (ref.current && hehnglef.current! == ref.current.offseteight) {
          hehnhtref.current = ref.current.offseteight;
          set (ref.current.offseteight);
        }
      })
  );
  useSelayouteffect (() => {
    if (on && ref.current) {
      set (ref.current.offseteight);
      Ro.OBSERVE (Ref.Current, {});
    }
    return () => ro.disconnect ();
  }, [on, ref.current]);
  return [ref, Höhe wie alle];
}</any>

Wir können uns für einen on bereitstellen, um die Aktivierung und Deaktivierung der Messfunktion zu umschalten (dies wird später nützlich sein). Wenn on , sagen wir, dass ResizeObserver unseren Inhalt beobachten soll. Wir geben einen Schiedsrichter zurück, der auf alles angewendet werden muss, was wir messen wollen, sowie auf die aktuelle Höhe.

Mal sehen, wie es tatsächlich funktioniert.

 const [heightref, Höhe] = UseHeight ();
const SlideinStyles = useSpring ({{
  config: {... config.stiff},
  Von: {Opazität: 0, Höhe: 0},
  Zu: {
    Opazität: Showb? 1: 0,
    Höhe: Showb? Höhe: 0
  }
});

<animated.div style="{{" ...slideinstyles overflow:>
  <div ref="{heightRef}">
    Dieser Inhalt wird verblassen und mit dem Gleiten verblassen
  </div>
</animated.div>

useHeight gibt uns den Höhenwert des Refs und den Inhalt, den wir an unsere Feder übergeben. Dann wenden wir REF an und wenden Sie den Höhenstil an.

Oh, vergessen Sie nicht overflow: hidden . Dies ermöglicht es uns, die von uns angepassten Höhenwerte korrekt einzuschließen.

Animationsübergang

Lassen Sie uns schließlich sehen, wie Sie animierte Elemente zum DOM hinzufügen und animierte Elemente aus dem DOM entfernen. Wir wissen bereits, wie ein vorhandenes Projekt animiert und die Wertänderungen der Elemente im DOM beibehalten werden können, aber um das Hinzufügen oder Entfernen von Elementen zu belasten oder zu entfernen, benötigen wir einen neuen Haken: useTransition .

Wenn Sie React-Spring bereits verwendet haben, ist dies einer der wenigen Orte, an denen die 9.x-Version erhebliche Änderungen in ihrer API aufweist. Schauen wir uns an.

Animation der Projektliste wie folgt:

 const [list, setlist] = usestate ([]);

Wir werden unsere Transformationsfunktion wie folgt erklären:

 const listtransitions = useTransition (Liste, {
  config: config.gentle,
  Von: {Opazität: 0, Transformation: "Translate3d (-25%, 0px, 0px)"},
  ENTER: {OPACITY: 1, Transform: "Translate3d (0%, 0px, 0px)"},
  Urlaub: {Opazität: 0, Höhe: 0, Transform: "Translate3d (25%, 0px, 0px)"},
  Schlüssel: list.map ((Element, Index) => Index)
});

Wie ich bereits erwähnt habe, ist die Rückgabewert listTransitions eine Funktion. React-Spring verfolgt das Listenarray und verfolgt die hinzugefügten und gelöschten Elemente. Wir rufen die Funktion listTransitions auf und stellen eine Rückruffunktion bereit, die ein einzelnes Stilobjekt und ein einzelnes Element akzeptiert. React-Spring ruft sie für jedes Element in der Liste an, basierend darauf, ob das Element neu hinzugefügt, neu gelöscht oder gerade in der Liste gefunden wird, und verwenden den richtigen Stil.

Beachten Sie den Abschnitt "Schlüsseln": Dadurch können wir React-Spring mitteilen, wie Objekte in der Liste erkannt werden. In diesem Fall habe ich beschlossen, den Index des Elements im Array zu beurteilen, um das Element einzigartig zu definieren. Normalerweise ist dies eine schlechte Idee, aber jetzt ermöglicht es uns zu sehen, wie die Funktion tatsächlich funktioniert. In der folgenden Demonstration fügt die Schaltfläche Projekt hinzufügen das Element beim Klicken am Ende der Liste hinzu, und die Schaltfläche "Letzte Projekt löschen" entzieht das zuletzt hinzugefügte Element aus der Liste. Wenn Sie also das Eingabefeld eingeben und schnell auf die Schaltfläche Hinzufügen klicken und dann auf die Schaltfläche Löschen klicken, sehen Sie, dass das gleiche Element reibungslos eingibt und dann sofort von jeder Stufe der Animation abgelassen wird. Wenn Sie stattdessen ein Element hinzufügen und schnell auf die Schaltfläche Löscher und die Schaltfläche hinzufügen, wird das gleiche Element anfängt zu rutschen. Dann hält sie plötzlich an Ort und Stelle und rutscht dorthin zurück, wo es sich befindet.

Demo

Wow, ich habe so viel gesagt! Dies ist eine laufbare Demo, die alles zeigt, was wir gerade abgedeckt haben.

[Demo -Link]

Andere Details

Haben Sie bemerkt, dass beim Abrutschen des Inhalts in der Demo es sich wie… Frühling anhält? Hier stammt der Name: React-Spring verwendet Springphysik, um unsere sich ständig ändernden Werte zu interpolieren. Es unterteilt die Wertänderung nicht einfach in n gleiche Inkremente und wendet diese Inkremente in N -gleiche Verzögerungen an. Stattdessen verwendet es komplexere Algorithmen, um diesen federartigen Effekt zu erzeugen, der natürlicher erscheinen wird.

Der Federalgorithmus ist vollständig konfigurierbar, mit einigen Voreinstellungen, die Sie direkt verwenden können - die obige Demonstration verwendet stiff und gentle Voreinstellungen. Weitere Informationen finden Sie in der Dokumentation.

Beachten Sie auch, wie ich Werte innerhalb von translate3d -Werten animiere. Wie Sie sehen können, ist die Syntax nicht die prägnanteste, daher liefert React-Still-Abkürzungen. Es gibt eine Dokumentation dazu, aber für den Rest dieses Artikels werde ich weiterhin die vollständige Nicht-Shortcut-Syntax aus Gründen der Klarheit verwenden.

Schließlich möchte ich feststellen, dass Sie, wenn Sie den Inhalt in der obigen Demo hochrutschen, den Inhalt darunter sehen können, der am Ende ein wenig hämmert. Dies ist auf den gleichen Absprungeffekt zurückzuführen. Es sieht klar aus, wenn der Inhalt eingerichtet wird, aber nicht, wenn wir den Inhalt nach oben schieben. Bleiben Sie dran, wie wir es ausschalten werden. (Spoiler, es ist clamp ).

Einige Notizen zu diesen Sandkästen

Code Sandbox verwendet Hot Reload. Wenn Sie den Code ändern, werden die Änderungen normalerweise sofort reflektiert. Das ist cool, aber es kann für die Animation zerstörerisch sein. Wenn Sie anfangen zu basteln und dann ein seltsames, angeblich falsches Verhalten zu sehen, versuchen Sie, die Sandbox zu erfrischen.

Andere Sandkästen in diesem Artikel werden die Modalität verwenden. Aus Gründen, die ich nicht vollständig herausfinden kann, können Sie keinen Code ändern, wenn das Modal eingeschaltet wird - das Modal weigert sich, den Fokus aufzugeben. Schalten Sie also unbedingt das Modal aus, bevor Sie Änderungen ausprobieren.

Erstellen Sie praktische Anwendungen

Dies sind die grundlegenden Bausteine ​​des React-Stirns. Verwenden wir sie, um etwas Interessanteres aufzubauen. In Anbetracht all dieser oben genannten denken Sie vielleicht, dass React-Still-Spring sehr einfach zu bedienen ist. In der Praxis kann es leider schwierig sein, einige der Feinheiten herauszufinden, die korrekt behandelt werden müssen. Viele dieser Details werden im Rest dieses Artikels ausführlich untersucht.

Ich habe schon einmal in irgendeiner Weise mit meinem Buchlistenprojekt verwandt. Dieser Beitrag ist keine Ausnahme - es ist keine Besessenheit, es ist nur so, dass das Projekt einen öffentlich verfügbaren GraphQL -Endpunkt und eine Menge vorhandener Code hat, die ausgenutzt werden können, was ihn zu einem offensichtlichen Ziel macht.

Lassen Sie uns eine Benutzeroberfläche erstellen, mit der Sie Modale öffnen und nach Büchern suchen können. Wenn die Ergebnisse angezeigt werden, können Sie sie der Auslaufliste ausgewählter Bücher hinzufügen, die unter dem Modal angezeigt werden. Sobald Sie fertig sind, können Sie das Modal ausschalten und auf eine Schaltfläche klicken, um Bücher zu finden, die dem ausgewählten Buch ähnlich sind.

Wir beginnen mit einer voll funktionsfähigen Benutzeroberfläche und fügen dann die Abschnitte, einschließlich interaktiver Demos, nach und nach Animationen hinzu.

Wenn Sie wirklich wissen möchten, wie das Endergebnis aussieht oder ob Sie bereits mit React-Sprüche vertraut sind und sehen möchten, ob ich etwas abdeckte, das Sie noch nicht wissen, ist es hier (es wird keine Designpreise gewinnen, ich bin ziemlich klar). Der Rest dieses Artikels führt den Prozess des endgültigen Zustands Schritt für Schritt vor.

Animieren Sie unsere Modale

Beginnen wir mit unserer Modalität. Bevor wir Daten hinzufügen, lassen wir unsere Modale sehr gut animieren. So sieht ein grundlegender, unanimierter Modal aus. Ich verwende Ryan Florence's Reach UI (insbesondere modale Komponenten), aber die Idee ist die gleiche, egal mit welchem ​​Erstellen Sie das Modal erstellen. Wir möchten unseren Hintergrund verblassen und unseren modalen Inhalt konvertieren.

Da das Modal bedingt nach einem "offenen" Attribut "offen" gerendert wird, werden wir useTransition -Haken verwenden. Ich habe das Reach UI -Modal mit meiner eigenen modalen Komponente eingeschlossen und leere Inhalte oder tatsächliche Modal basierend auf isOpen -Attribut gemacht. Wir müssen es nur animieren, indem wir Haken umwandeln.

So sieht der Conversion -Hook aus:

 const modaltransition = usetransition (!! isopen, {
  Konfiguration: Isopen? {... config.stiff}: {dauer: 150},
  Von: {Opazität: 0, Transformation: `Translate3d (0px, -10px, 0px)`},
  ENTER: {OPACITY: 1, Transform: `Translate3d (0px, 0px, 0px)`},
  Urlaub: {Opazität: 0, Transformation: `Translate3d (0px, 10px, 0px)`}
});

Hier gibt es keine großen Überraschungen. Wir wollen verblassen und einen leichten vertikalen Übergang liefern, der darauf basiert, ob das Modal aktiv ist oder nicht. Der seltsame Teil ist Folgendes:

 Konfiguration: Isopen? {... config.stiff}: {dauer: 150},

Ich möchte nur die Springphysik verwenden, wenn das Modal eingeschaltet ist. Der Grund dafür - zumindest meiner Erfahrung nach - ist, dass der Hintergrund zu lange verschwindet, wenn Sie den Modal ausschalten, was zu lange interaktiv ist. Wenn das Modal eingeschaltet ist, springt es durch Frühlingsphysik gut an Ort und Stelle, und wenn es geschlossen ist, verschwindet es schnell in 150 Millisekunden.

Natürlich werden wir unsere Inhalte über die vom Haken zurückgegebene Konvertierungsfunktion präsentieren. Beachten Sie, dass ich Opazitätstile aus dem Stilobjekt extrahiere, um sie auf den Hintergrund zu bewerben und dann alle Animationsstile auf den tatsächlichen modalen Inhalt anzuwenden.

 Modaltransition zurückgeben (
  (Stile, Isopen) =>
    Isopen && (
      <animateddialogoverlay allowpinchzoom="{true}" initialfocusref="{focusRef}" isopen="{isOpen}" ondismiss="{onHide}" style="{{" opacity: styles.opacity>
        <animateddialogcontent style="{{" border: solid hsla borderradius: maxwidth:>
          <div>
            <div>
              <standardmodalheader caption="{headerCaption}" onhide="{onHide}"></standardmodalheader>
              {Kinder}
            </div>
          </div>
        </animateddialogcontent>
      </animateddialogoverlay>
    )
);

[Demo -Link]

Der verbleibende Teil wird weggelassen, da die Länge zu lang ist und mit dem vorherigen Inhalt wiederholt wird. Die Kernidee besteht darin, React-Springs useSpring und useTransition Hooks in Kombination mit ResizeObserver zu verwenden, um verschiedene Animationseffekte zu erzielen, einschließlich Verblassen, Höhenänderungen sowie Eintritts- und Ausgangsanimationen von Listenelementen. Der Artikel erläutert detailliert, wie mit Animationsdetails wie Anfangszustand, Animationsdauer und wie man Animationskonflikte vermieden wird. Das Endergebnis ist eine interaktive Benutzeroberfläche mit reibungsloser und Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonSinn für Reaktionen machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!