Es wäre schön, den Übergang zwischen Seiten animieren zu können, wenn wir das im Web wollen, ohne auf Hacks oder umfangreiche Architekturentscheidungen zurückgreifen zu müssen, um dies zu erreichen. Ich könnte mir eine API vorstellen, die etwas ausführt, vielleicht integriert mit WAAPI, bevor die Seite entladen wird, und andere Dinge, nachdem die nächste Seite geladen wurde. Dies, mit ansonsten normalen alten Ankerlinks und Seitenaufrufen.
Wir haben zwar eine onbeforeunload API, aber ich bin mir nicht sicher, welche Nachteile diese hat. Technisch gesehen können wir jetzt Seitenübergänge erstellen, auch ohne Single-Page-App-Architektur, aber was ich will, sind **speziell dafür entwickelte APIs**, die uns helfen, dies sauber (verständliche Funktionen) und mit Blick auf Leistung (so schnell wie normale Linkklicks) und Zugänglichkeit (wie Fokusbehandlung) zu tun.
Wenn Sie ohnehin eine Single-Page-App erstellen, haben Sie die Freiheit, zwischen Ansichten zu animieren, da die Seite nie neu geladen wird. Die Gefahr dabei ist, dass Sie eine Single-Page-App *nur* für diese Möglichkeit wählen könnten, was ich damit meine, dass man sich auf eine Website-Architektur einlassen muss, um dies zu erreichen. Das fühlt sich wie ein unglücklicher Kompromiss an, da Single-Page-Apps eine Menge Overhead mit sich bringen, wie Werkzeuge und Zugänglichkeitsbedenken, die man sonst nicht benötigt hätte.
Ohne eine Single-Page-App könnten Sie etwas wie Turbo und animate.css wie dies verwenden. Oder Adams neue transition.style, eine auf clip-path() basierende Hommage an Daniel Edans Meisterwerk. Vielleicht wäre dieser Ansatz in Kombination mit instant.page so schnell wie jeder andere interne Linkklick.
Es gibt andere Akteure, die versuchen, dies zu lösen, wie smoothState.js und Swup. Der Trick dabei ist: Unterbrechen Sie die Aktion zum Wechseln zur nächsten Seite, führen Sie zuerst die Animation aus, laden Sie dann die nächste Seite und animieren Sie die neue Seite ein. Technisch gesehen verlangsamt dies die Sache ein wenig, aber Sie können es ziemlich effizient machen und die Bewegung lenkt genug ab, dass die wahrgenommene Leistung sogar besser sein könnte.
Idealerweise müssten wir nicht die gesamte Seite animieren, aber wir könnten die volle Kontrolle haben, um interessantere Übergänge zu gestalten. Verdammt, ich habe das vor einem Jahrzehnt mit einer Seite für einen Musiker gemacht, wo beim Herumklicken auf der Seite die Dinge einfach verschoben wurden, damit die Musik weiterspielt (und es machte Spaß).
Dies wäre ein großartiger Ort für die Webplattform, um einzugreifen. Ich erinnere mich, dass Jake sich dafür eingesetzt hat vor Jahren, aber ich bin mir nicht sicher, ob das irgendwohin geführt hat. Dann bekamen wir Portals, die... okay sind? Das ist so, als würde man ein iframe auf der Seite laden und es dann animieren, die ganze Seite zu übernehmen (und die URL zu aktualisieren). Viel Animationsnuance ist dort nicht möglich, aber man könnte sicherlich ein paar Seiten herumwischen oder sie ein- und ausblenden (hier ist noch eine: Highway), wie es jQuery Mobile vor Urzeiten getan hat.
Chromium arbeitet an etwas dafür: Shared Element Transitions.
https://github.com/vmpstr/shared-element-transitions/blob/main/README.md
In Canary zum Ausprobieren verfügbar, obwohl es im Moment nur teilweise implementiert ist.
Ich habe mich in letzter Zeit mit Seitenübergängen beschäftigt. Ich habe ein ziemlich gutes Setup mit und durch Erweiterung von readyState für den Seitenaufruf. onBeforeUnload war für den Seitenabgang etwas zu begrenzt, daher habe ich letztendlich Events auf Links verwendet.
Ich werde hier keinen Link posten, aber wenn jemand interessiert ist, kann er mir immer eine PM schicken, denke ich.
Ich bin interessiert, kann aber nicht herausfinden, wie ich dir eine PM schicke. Du findest mich auf Github als tomyo. Danke!
Es ist immer besser, die Zeit der Benutzer nicht mit blockierenden Animationen zu verschwenden.
Fühlt sich dogmatisch an.
Manchmal helfen Animationen Benutzern, was passiert, klarer zu verstehen.
Animationen können tatsächlich zur Verbesserung der Zugänglichkeit eingesetzt werden, indem sie den Kontext erklären.
Immer wenn ein Benutzer sagt: „Warte mal, was ist gerade passiert?“, drückt er Verwirrung über einen Übergang von einem Zustand der Benutzeroberfläche zu einem anderen aus. Deshalb animieren Betriebssystem-Benutzeroberflächen standardmäßig fast alles, insbesondere Android und iOS.
Das gesagt sei, ist es normalerweise am besten, Animationen auf höchstens 300 Millisekunden zu beschränken und anzuerkennen, wenn der Benutzer "reduzierte Bewegung bevorzugt" aktiviert hat.
Es könnte immer noch der Fall sein, dass Sie dem Benutzer bei den ersten Interaktionen mit Ihrer Benutzeroberfläche den Kontext erklären, aber bei den nächsten 1000 Nutzungen verlangsamen Sie ihn. Ich vermute, deshalb haben beliebte Apps (wie Facebook/Instagram) sehr wenige Übergänge/Animationen.
Das ist etwas, das ich an Svelte-Sapper liebe, jetzt ist Sveltekit eine Komponentenumschaltung! Das ist so großartig.
Ja. Wollte das gerade sagen. Das ist eine gute integrierte Funktion von Svelte-Sapier.
Absolut. Und mit Kit können Sie Dinge im Frontend routen, sodass es sich wie eine vollwertige Website anfühlt, nur viel schneller. Ganz zu schweigen davon, dass Sie SSR für den ersten Ladevorgang nutzen können. Das Beste aus beiden Welten.
Ich baue genau das, eine Plattform, die JSON-gesteuerte dynamische Funktionsverzweigung in ihrer Architektur nutzt. Es ist eine Single-Page-Social-Media-Post-Website, die URL-Versionen von teilbaren Inhalten produzieren kann. Sie animiert auch einzelne Abschnitte mit vielen individuell erstellten Animationseffekten, von sequenziellen Treppenrotationen bis hin zu Skalier- und Einblendeffekten bis hin zu einer Vielzahl der coolsten Animationen, die ich in den letzten 6 Jahren finden konnte. Sie wird auch ein CMS haben, das die Erstellung neuer Schaltflächen und Inhalte zum Kinderspiel macht. Die Plattform wird online gehostet und mit wenigen Klicks und Ihrer gekauften Domain wird automatisch eine anpassbare Version der Social-Media-Post-Website installiert und auch eine Android-App zur Begleitung Ihrer neuen Website erstellt. Sie verfügt auch über automatisch skalierendes CSS und funktioniert auf jedem Gerät mit einem Browser oder Android, außer bisher auf iPhones. Es gibt anpassbare Themen und sie ermöglicht Benutzern, im Netz in ihrem eigenen iframe-Browser zu suchen, der Inhaltstypen automatisch erkennt und nutzt. Mein Name ist Jonathon, und meine E-Mail-Adresse ist [email protected], wenn Sie mehr erfahren möchten.
Ich schätze, die Herausforderung bei der Implementierung eines Standards dafür ist, dass dies wirklich nur beim Entladen von Seiten geschehen würde. Sie könnten nicht effizient Ressourcen laden und eine Seitenübergangsanimation auf eine Seite anwenden, da Sie die Übergangsanimation bereits geladen haben müssten.
Ich auch. Portals sahen für mich viel leistungsfähiger aus, als Sie sie beschreiben, aber ich habe nicht damit herumgebastelt, nur Demos gesehen. Seltsam, obwohl... Hast du die gesehen, bei der das Portal der Maus folgte und man überall klicken und Portals spawnen konnte? Ich vergessen habe, wo ich es gesehen habe.
Wenn Sie animierte Übergänge zwischen Seiten erstellen möchten, ist es wichtig, dass die Anwendung (abgesehen von den Animationen) genauso funktioniert wie eine normale Webseite. Insbesondere in einer normalen Webanwendung merken sich Browser die Scrollposition von Seiten, während Sie durch die Historie navigieren, aber dies in einer SPA zu tun, ist knifflig und Sie müssen zu allen möglichen Hacks greifen, um die Scrollposition zu speichern. Ich sehe nichts Gutes daran, in einigen Best-Case-Szenarien einen schönen Animationseffekt zu haben, aber die Seite funktioniert dann in anderen Fällen nicht wie erwartet.
Die Dinge sehen vielversprechend aus.
https://github.com/WICG/shared-element-transitions/
(Nur Single-Page-Apps bisher, aber die Daumen sind gedrückt, dass dies auch auf Seiten angewendet wird.)