View Transitions

Openen in ChatGPT

Java API

25.11 Experimenteel

Viewtransities bieden geanimeerde overgangen wanneer de DOM verandert, waardoor visuele schokken worden verminderd en de ruimtelijke context tijdens navigatie of content-updates behouden blijft. webforJ integreert met de View Transition API van de browser om de complexiteit van het coördineren van animaties tussen oude en nieuwe toestanden te beheren.

Toon Code

ViewTransitionChatView.java

chat.css

DemoHeader.java

demo-header.css

Experimentele functie

Deze functie is experimenteel en kan in een toekomstige release veranderen of verwijderd worden.

Basisgebruik

Om een weergaveovergang te creëren, gebruik Page.getCurrent().startViewTransition(), dat een builder retourneert voor het configureren van de overgang:

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

Het overgangsproces legt een momentopname van de huidige staat vast, past je DOM-wijzigingen toe in de onUpdate callback, en animeert vervolgens van de oude momentopname naar de nieuwe inhoud. Je moet done.run() aanroepen om aan te geven wanneer je wijzigingen zijn voltooid.

De onUpdate callback is vereiste

Als je start() aanroept zonder een update callback in te stellen, resulteert dit in een IllegalStateException.

Toepassen van overgangen

webforJ biedt vooraf gedefinieerde overgangstypen die je kunt toepassen op componenten die de DOM binnenkomen of verlaten:

Constante	Effect
ViewTransition.NONE	Geen animatie
ViewTransition.FADE	Crossfade tussen oude en nieuwe inhoud
ViewTransition.SLIDE_LEFT	Inhoud stroomt naar links (zoals voortgangsnavigatie)
ViewTransition.SLIDE_RIGHT	Inhoud stroomt naar rechts (zoals terug navigatie)
ViewTransition.SLIDE_UP	Inhoud stroomt omhoog
ViewTransition.SLIDE_DOWN	Inhoud stroomt omlaag
ViewTransition.ZOOM	Oude inhoud krimpt, nieuwe inhoud groeit in
ViewTransition.ZOOM_OUT	Oude inhoud groeit weg, nieuwe inhoud krimpt in

Gebruik enter() om een component dat wordt toegevoegd te animeren en exit() om een component dat wordt verwijderd te animeren:

// Animeer een component die de DOM binnenkomt
Page.getCurrent().startViewTransition()
  .enter(chatPanel, ViewTransition.ZOOM)
  .onUpdate(done -> {
    container.add(chatPanel);
    done.run();
  })
  .start();

// Animeer een component die de DOM verlaat
Page.getCurrent().startViewTransition()
  .exit(chatPanel, ViewTransition.FADE)
  .onUpdate(done -> {
    container.remove(chatPanel);
    done.run();
  })
  .start();

Gedeelde componentovergangen

Gedeelde componentovergangen creëren een vervormingseffect waarbij een component lijkt te transformeren van zijn positie in de oude weergave naar zijn positie in de nieuwe weergave. Dit wordt bereikt door componenten dezelfde overgangsnaam te geven met behulp van de setViewTransitionName() methode, die beschikbaar is op elk component dat de HasStyle interface implementeert.

// In de kaartweergave
image.setViewTransitionName("blog-image");

// In de detailweergave - dezelfde naam creëert de morph
image.setViewTransitionName("blog-image");

Tijdens de overgang tussen deze weergaven animeert de browser de component tussen posities, wat een verbonden visuele ervaring creëert.

Gebruik unieke namen

Wanneer je met lijsten of herhaalde componenten werkt, neem een unieke identifier op in de overgangsnaam. Elk component heeft zijn eigen unieke naam nodig om correct naar het bijbehorende component in de nieuwe weergave te vervormen. Het gebruik van dezelfde naam voor meerdere zichtbare componenten veroorzaakt ongedefinieerd gedrag.

Toon Code

ViewTransitionMorphView.java

BlogCard.java

BlogDetail.java

morph.css

DemoHeader.java

demo-header.css

Lijstreordering

Een veelvoorkomende use case voor gedeelde componentovergangen is het animeren van lijstitems wanneer hun volgorde verandert. Door elke item een unieke view-transition-name toe te wijzen, animeert de browser automatisch componenten naar hun nieuwe posities:

// Elke kaart krijgt een unieke overgangsnaam op basis van zijn ID
card.setViewTransitionName("card-" + item.id());

// Bij het schudden, update gewoon de DOM - de browser regelt de animatie
Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    renderList();
    done.run();
  })
  .start();

Toon Code

ViewTransitionShuffleView.java

ShuffleCard.java

shuffle.css

DemoHeader.java

demo-header.css

Aangepaste CSS-animaties

Voor volledige controle over animaties kun je aangepaste CSS-keyframes definiëren. webforJ voegt -enter of -exit suffixes toe aan je overgangsnamen, die je gebruikt om de pseudo-elementen van de weergaveovergang te targeten:

/* Definieer keyframes voor het binnenkomen van componenten */
@keyframes flip-enter {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
  }
}

/* Toepassen op het pseudo-element van de weergaveovergang */
::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;
}

Verwijs naar je aangepaste animatie door de naam ervan (zonder het suffix) door te geven aan enter() of exit():

// Gebruik "flip-in" - webforJ voegt automatisch "-enter" suffix toe
Page.getCurrent().startViewTransition()
  .enter(notification, "flip-in")
  .onUpdate(done -> {
    stage.add(notification);
    done.run();
  })
  .start();

// Gebruik "blur-out" voor exit - webforJ voegt automatisch "-exit" suffix toe
Page.getCurrent().startViewTransition()
  .exit(notification, "blur-out")
  .onUpdate(done -> {
    stage.remove(notification);
    done.run();
  })
  .start();

Toon Code

ViewTransitionEnterExitView.java

enterexit.css

DemoHeader.java

demo-header.css

CSS-aanpassing

Elk vooraf gedefinieerd overgangstype blootlegt CSS-aangepaste eigenschappen voor fijnafstelling:

Vervagen

Variabele	Standaard	Beschrijving
--vt-fade-duration	200ms	Animatieduur
--vt-fade-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie

Links schuiven

Variabele	Standaard	Beschrijving
--vt-slide-left-duration	200ms	Animatieduur
--vt-slide-left-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie
--vt-slide-left-distance	30%	Schuifafstand

Rechts schuiven

Variabele	Standaard	Beschrijving
--vt-slide-right-duration	200ms	Animatieduur
--vt-slide-right-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie
--vt-slide-right-distance	30%	Schuifafstand

Omhoog schuiven

Variabele	Standaard	Beschrijving
--vt-slide-up-duration	200ms	Animatieduur
--vt-slide-up-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie
--vt-slide-up-distance	30%	Schuifafstand

Omlaag schuiven

Variabele	Standaard	Beschrijving
--vt-slide-down-duration	200ms	Animatieduur
--vt-slide-down-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie
--vt-slide-down-distance	30%	Schuifafstand

Inzoomen

Variabele	Standaard	Beschrijving
--vt-zoom-duration	200ms	Animatieduur
--vt-zoom-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie
--vt-zoom-scale	0.8	Schaalfactor (oude zoomt naar buiten, nieuwe zoomt naar binnen)

Uitzoomen

Variabele	Standaard	Beschrijving
--vt-zoom-out-duration	200ms	Animatieduur
--vt-zoom-out-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-functie
--vt-zoom-out-scale	1.2	Schaalfactor (oude zoomt naar binnen, nieuwe zoomt naar buiten)

Variabelen overschrijven

Om aan te passen, overschrijf je deze variabelen in je CSS:

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

Voor geavanceerde aanpassing, target de pseudo-elementen van de weergaveovergang direct:

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

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