View Transitions

In ChatGPT öffnen

Java API

25.11 Experimental

View transitions bieten animierte Übergänge, wenn sich der DOM ändert, wodurch visuelle Störungen verringert und der räumliche Kontext während der Navigation oder Inhaltsaktualisierungen erhalten bleibt. webforJ integriert sich in die View Transition API des Browsers, um die Komplexität der Koordination von Animationen zwischen alten und neuen Zuständen zu bewältigen.

Code anzeigen

Java

CSS

Experimentelle API

Diese API ist seit 25.11 als experimentell gekennzeichnet und kann sich in zukünftigen Versionen ändern. Die API-Signatur, das Verhalten und die Leistungseigenschaften können modifiziert werden.

Grundlegende Verwendung

Um einen View-Übergang zu erstellen, verwenden Sie Page.getCurrent().startViewTransition(), das einen Builder zur Konfiguration des Übergangs zurückgibt:

Page.getCurrent().startViewTransition()
    .onUpdate(done -> {
        container.remove(oldView);
        container.add(newView);
        done.run();
    })
    .start();

Der Übergangsprozess erfasst einen Snapshot des aktuellen Zustands, wendet Ihre DOM-Änderungen im onUpdate-Callback an und animiert dann vom alten Snapshot zu den neuen Inhalten. Sie müssen done.run() aufrufen, um anzuzeigen, wann Ihre Änderungen abgeschlossen sind.

Der onUpdate-Callback ist erforderlich

Aufruf von start(), ohne einen Aktualisierungs-Callback festzulegen, löst eine IllegalStateException aus.

Anwenden von Übergängen

webforJ bietet vordefinierte Übergangstypen, die Sie auf Komponenten anwenden können, die in den DOM eintreten oder ihn verlassen:

Konstante	Effekt
ViewTransition.NONE	Keine Animation
ViewTransition.FADE	Überblenden zwischen alten und neuen Inhalten
ViewTransition.SLIDE_LEFT	Inhalt fließt nach links (wie bei einer Vorwärtsnavigation)
ViewTransition.SLIDE_RIGHT	Inhalt fließt nach rechts (wie bei einer Rücknavigation)
ViewTransition.SLIDE_UP	Inhalt fließt nach oben
ViewTransition.SLIDE_DOWN	Inhalt fließt nach unten
ViewTransition.ZOOM	Alter Inhalt schrumpft, neuer Inhalt wächst
ViewTransition.ZOOM_OUT	Alter Inhalt wächst, neuer Inhalt schrumpft

Verwenden Sie enter(), um eine Komponente, die hinzugefügt wird, zu animieren, und exit(), um eine Komponente, die entfernt wird, zu animieren:

// Animieren einer Komponente, die in den DOM eintritt
Page.getCurrent().startViewTransition()
    .enter(chatPanel, ViewTransition.ZOOM)
    .onUpdate(done -> {
        container.add(chatPanel);
        done.run();
    })
    .start();

// Animieren einer Komponente, die den DOM verlässt
Page.getCurrent().startViewTransition()
    .exit(chatPanel, ViewTransition.FADE)
    .onUpdate(done -> {
        container.remove(chatPanel);
        done.run();
    })
    .start();

Gemeinsame Komponentenübergänge

Gemeinsame Komponentenübergänge erzeugen einen Morphing-Effekt, bei dem eine Komponente anscheinend von ihrer Position in der alten Ansicht zu ihrer Position in der neuen Ansicht transformiert wird. Dies wird erreicht, indem den Komponenten derselbe Übergangsname mit der Methode setViewTransitionName() zugewiesen wird, die für jede Komponente verfügbar ist, die das HasStyle-Interface implementiert.

// In der Kartenansicht
image.setViewTransitionName("blog-image");

// In der Detailansicht - derselbe Name erzeugt das Morph
image.setViewTransitionName("blog-image");

Bei der Übergangs zwischen diesen Ansichten animiert der Browser die Komponente zwischen den Positionen und schafft ein verbundenes visuelles Erlebnis.

Verwenden Sie einzigartige Namen

Wenn Sie mit Listen oder wiederholten Komponenten arbeiten, fügen Sie eine eindeutige Kennung im Übergangsname hinzu. Jede Komponente benötigt ihren eigenen einzigartigen Namen, um korrekt zu ihrer entsprechenden Komponente in der neuen Ansicht zu morphieren. Die Verwendung desselben Namens für mehrere sichtbare Komponenten führt zu undefiniertem Verhalten.

Code anzeigen

Java

CSS

Listenneuanordnung

Ein häufiger Anwendungsfall für gemeinsame Komponentenübergänge besteht darin, Listenelemente zu animieren, wenn sich deren Reihenfolge ändert. Durch die Zuordnung eines eindeutigen view-transition-name-Wertes zu jedem Element animiert der Browser die Komponenten automatisch in ihre neuen Positionen:

// Jede Karte erhält einen einzigartigen Übergangsname basierend auf ihrer ID
card.setViewTransitionName("card-" + item.id());

// Beim Mischen, aktualisieren Sie einfach den DOM - der Browser übernimmt die Animation
Page.getCurrent().startViewTransition()
    .onUpdate(done -> {
        renderList();
        done.run();
    })
    .start();

Code anzeigen

Java

CSS

Benutzerdefinierte CSS-Animationen

Um vollständige Kontrolle über Animationen zu haben, können Sie benutzerdefinierte CSS-Keyframes definieren. webforJ fügt den Übergangsname die Suffixe -enter oder -exit hinzu, die Sie verwenden, um die Pseudo-Elemente des View-Übergangs anzusprechen:

/* Definieren von Keyframes für eintrittende Komponenten */
@keyframes flip-enter {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
  }
}

/* Anwenden auf das Pseudo-Element des View-Übergangs */
::view-transition-new(flip-in-enter) {
  animation: flip-enter 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}

::view-transition-old(flip-in-enter) {
  display: none;
}

Verweisen Sie auf Ihre benutzerdefinierte Animation, indem Sie ihren Namen (ohne das Suffix) an enter() oder exit() übergeben:

// Verwenden Sie "flip-in" - webforJ fügt automatisch das Suffix "-enter" hinzu
Page.getCurrent().startViewTransition()
    .enter(notification, "flip-in")
    .onUpdate(done -> {
        stage.add(notification);
        done.run();
    })
    .start();

// Verwenden Sie "blur-out" für den Austritt - webforJ fügt automatisch das Suffix "-exit" hinzu
Page.getCurrent().startViewTransition()
    .exit(notification, "blur-out")
    .onUpdate(done -> {
        stage.remove(notification);
        done.run();
    })
    .start();

Code anzeigen

Java

CSS

CSS-Anpassung

Jeder vordefinierte Übergangstyp stellt CSS-Benutzerdefinierte Eigenschaften zur Feinabstimmung zur Verfügung:

Fade

Variable	Standard	Beschreibung
--vt-fade-duration	200ms	Animationsdauer
--vt-fade-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion

Links gleiten

Variable	Standard	Beschreibung
--vt-slide-left-duration	200ms	Animationsdauer
--vt-slide-left-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion
--vt-slide-left-distance	30%	Gleiten-Distanz

Rechts gleiten

Variable	Standard	Beschreibung
--vt-slide-right-duration	200ms	Animationsdauer
--vt-slide-right-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion
--vt-slide-right-distance	30%	Gleiten-Distanz

Nach oben gleiten

Variable	Standard	Beschreibung
--vt-slide-up-duration	200ms	Animationsdauer
--vt-slide-up-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion
--vt-slide-up-distance	30%	Gleiten-Distanz

Nach unten gleiten

Variable	Standard	Beschreibung
--vt-slide-down-duration	200ms	Animationsdauer
--vt-slide-down-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion
--vt-slide-down-distance	30%	Gleiten-Distanz

Zoom

Variable	Standard	Beschreibung
--vt-zoom-duration	200ms	Animationsdauer
--vt-zoom-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion
--vt-zoom-scale	0.8	Skalierungsfaktor (alter zoomt auf diesen Wert, neuer zoomt von diesem Wert ein)

Zoom aus

Variable	Standard	Beschreibung
--vt-zoom-out-duration	200ms	Animationsdauer
--vt-zoom-out-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-Funktion
--vt-zoom-out-scale	1.2	Skalierungsfaktor (alter zoomt auf diesen Wert, neuer zoomt von diesem Wert aus)

Überschreiben von Variablen

Um anzupassen, überschreiben Sie diese Variablen in Ihrem CSS:

:root {
  --vt-fade-duration: 300ms;
  --vt-slide-left-distance: 50%;
}

Für umfassende Anpassungen adressieren Sie direkt die Pseudo-Elemente des Endübergangs:

::view-transition-old(vt-slide-left-exit) {
  animation-duration: 400ms;
}

::view-transition-new(vt-slide-left-enter) {
  animation-timing-function: ease-out;
}