Seitenübergänge mit Phoenix LiveView

Das Problem

Wenn es um Seitenübergänge geht, haben wir als Webentwickler Schwierigkeiten. Obwohl in den Tagen von Macromedia Flash viel passiert ist (vielleicht etwas zu viel), ist es heutzutage sehr selten, eine Website zu finden, die ordnungsgemäße Seitenübergänge verwendet. Ohne die Verwendung einer Single Page App ist das ziemlich schwierig. Und sicherlich haben wir eine Menge Webflow und überanimierte Seiten gesehen, aber an Seiten (geschweige denn Seitenübergängen) mit subtilen „Das macht Sinn“-Animationen kommt man nicht so leicht vorbei.

Ich habe kürzlich in einem Podcast über meinen vorherigen Blogbeitrag gesprochen und auch dieses Thema diskutiert. Wir haben kurz über neue Dinge gesprochen, die passieren, und mir ist ein Tweet von Addy Osmani (der mit Google Chrome arbeitet) über die Shared Element Transitions API aufgefallen:

Wenn dieser Vorschlag umgesetzt wird, können Entwickler einfacher Animationen für Seitenübergänge erstellen, wie wir sie beispielsweise auf iOS sehen.

Die Lösung

Derzeit können wir die Shared Element Transitions API noch nicht verwenden. Und Sie sind hier, weil Sie wissen möchten, wie Sie jetzt in Phoenix Liveview schöne, subtile Animationen zwischen Seiten erzielen können … Also fangen wir an.

Bevor wir dies jedoch tun, müssen wir den Unterschied zwischen dem Routing zwischen Seiten und Komponenten verstehen. Wenn Sie LiveView verwenden, wird das DOM basierend auf Ihren Änderungen gepatcht. Wenn Sie also mit Phoenix.Liveview.push_patch oder Phoenix.Liveview.push_redirect zu einer anderen Seite wechseln, wird nur die Ansicht oder Komponente ersetzt, die Sie ändern möchten. Der Unterschied zwischen den beiden besteht darin, dass mit einem push_redirect (oder live_redirect) die Ansicht neu geladen wird, während push_patch (oder live_patch) die aktuelle Ansicht aktualisiert und jeden Unterschied, den es darin finden kann, durch Dom-Diffing aktualisiert (Vergleich der neuen HTML-Ausgabe mit der alten und Aktualisierung nur der Teile, die unterschiedlich sind).

Es hängt wirklich davon ab, wie Ihr Projekt strukturiert ist, damit Seitenübergänge funktionieren. Aber bei mave möchten wir die Verwendung von Layouts auf ein Minimum beschränken und unser Projekt so eingestellt haben, dass patch_to ausschließlich für die Animationen verwendet wird. Dies liegt daran, dass wir nur den inneren Container animieren möchten (ähnlich wie native Anwendungen animieren) und den Rest der Seite unverändert lassen möchten. Unsere Anwendung besteht aus einer Ansicht mit jeder „Seite“ als Komponente. Auf diese Weise können wir jede Komponente patchen, was lediglich eine Inhaltsersetzung darstellt, und bei Bedarf trotzdem die Daten in der Ansicht aktualisieren.

Auf die Inhaltskomponente wenden wir die folgenden Rückenwindklassen an: transition duration-100 ease-out opacity-0 scale-95. Dies sind die Standardklassen, die beim Rendern der Komponente vorhanden sind. Bedeutung: Das Div wird zunächst nicht sichtbar sein. Jetzt wollen wir die Animation beim Laden der Komponente über den Mount-Hook in Javascript auslösen:

Fügen Sie nun phx-hook="transition" zum Div der Inhaltskomponente hinzu, die animiert werden muss. Phoenix benötigt beim Anwenden eines Phx-Hooks ein ID-Attribut. Vergessen Sie also nicht, eines hinzuzufügen. Leider sind die meisten Browser nicht wirklich damit zufrieden, Animationen direkt nach einer HTML-Änderung anzuwenden (was Phoenix tut, um den Dom-Diff anzuwenden), sodass das oben Gesagte nicht funktioniert. Wir müssen ein paar Millisekunden warten, um die Animation auszuführen:

Jetzt wird jedes Mal, wenn die Komponente gemountet wird, diese Übergangsanimation ausgeführt.

Was aber, wenn Sie eine individuellere Animation für eine bestimmte Ansicht erstellen möchten? Vielleicht gleitet eine Ansicht von links und die andere von rechts. Um dies zu erreichen, möchten Sie einfach Klassen in Ihrer HEEX-Vorlage ändern und nicht in Javascript. Machen wir es also allgemeiner:

Dadurch werden die Klassen aus einer Liste als Attribute für das Div abgerufen, auf das Sie sie anwenden. Darüber hinaus haben wir auch den aktualisierten Hook hinzugefügt, um sicherzustellen, dass jedes Mal, wenn Sie etwas in Ihrer Komponente aktualisieren, diese nicht in den Standardzustand zurückkehrt: Dadurch wird sie unsichtbar opacity-0.

Und anstatt den Hook direkt aufzurufen, erstellen wir eine praktische Methode, die das Schreiben dieser Übergänge etwas einfacher macht:

Jetzt können Sie, ohne Änderungen an Ihrem Javascript vorzunehmen, Ihr Div schreiben und die gewünschten Änderungen anwenden: <div class="transition duration-100 ease-out opacity-0 scale-95" {transition("opacity-0 scale-95", "opacity-100 scale-100")}> ... </div> Sie müssen kein ID-Attribut oder den Hook hinzufügen. Wenden Sie die Funktion einfach auf Ihr Div an und alle oben genannten Attribute werden hinzugefügt.

Und das ist es. Ich hoffe, dass die Art und Weise, wie wir „Seiten“ innerhalb der Phoenix-Anwendung überführen, mithilfe der Shared Element Transitions API Teil des Frameworks wird, was im Vergleich zu anderen Stacks erneut ein Pluspunkt sein wird:

Wenn Sie den obigen Code verwenden möchten, habe ich die Snippets als a Github gist.