View Transitions

Openen in ChatGPT

Java API

25.11 Experimenteel

Bekijkovergangen bieden geanimeerde overgangen wanneer de DOM verandert, waardoor visuele schokken worden verminderd en de ruimtelijke context behouden blijft tijdens navigatie of inhoudsupdates. webforJ is geïntegreerd met de View Transition API van de browser om de complexiteit van het coördineren van animaties tussen oude en nieuwe toestanden te behandelen.

Toon Code

ViewTransitionChatView.java

chat.css

Experimentele functie

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

Basisgebruik

Om een kijkovergang 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 uw DOM-wijzigingen toe in de onUpdate callback en animeert vervolgens van de oude momentopname naar de nieuwe inhoud. U moet done.run() aanroepen om aan te geven wanneer uw wijzigingen zijn voltooid.

De onUpdate callback is vereist

Aanroepen van start() zonder een update-callback in te stellen, werpt een IllegalStateException.

Overgangen toepassen

webforJ biedt vooraf gedefinieerde overgangstypes die u kunt toepassen op componenten die de DOM binnenkomen of verlaten:

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

Gebruik enter() om een component die wordt toegevoegd te animeren en exit() om een component die 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 morphing-effect 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, beschikbaar 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");

Wanneer er tussen deze weergaven wordt overgaan, animeert de browser de component tussen posities, waardoor een verbonden visuele ervaring ontstaat.

Gebruik unieke namen

Bij het werken met lijsten of herhaalde componenten, voeg een unieke identificator toe in de overgangsnaam. Elke component vereist zijn eigen unieke naam om correct naar de bijbehorende component in de nieuwe weergave te morphen. Het gebruik van dezelfde naam voor meerdere zichtbare componenten veroorzaakt ongedefinieerd gedrag.

Toon Code

ViewTransitionMorphView.java

BlogCard.java

BlogDetail.java

morph.css

Lijst herordenen

Een veelvoorkomende use case voor gedeelde componentovergangen is het animeren van lijstitems wanneer hun volgorde verandert. Door een unieke view-transition-name aan elk item toe te wijzen, animeert de browser componenten automatisch 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 behandelt animatie
Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    renderList();
    done.run();
  })
  .start();

Toon Code

ViewTransitionShuffleView.java

ShuffleCard.java

shuffle.css

Aangepaste CSS-animaties

Voor volledige controle over animaties kunt u aangepaste CSS-keyframes definiëren. webforJ voegt -enter of -exit achtervoegsels toe aan uw overgangsnamen, die u gebruikt om de pseudo-elementen van de kijkovergang te targeten:

/* Definieer keyframes voor binnenkomende 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 kijkovergang */
::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 uw aangepaste animatie door de naam (zonder het achtervoegsel) door te geven aan enter() of exit():

// Gebruik "flip-in" - webforJ voegt automatisch "-enter" achtervoegsel 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" achtervoegsel toe
Page.getCurrent().startViewTransition()
  .exit(notification, "blur-out")
  .onUpdate(done -> {
    stage.remove(notification);
    done.run();
  })
  .start();

Toon Code

ViewTransitionEnterExitView.java

enterexit.css

CSS-aanpassing

Elk vooraf gedefinieerd overgangstype exposeert CSS-variabelen voor verfijning:

Vervagen

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

Slide naar links

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

Slide naar rechts

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

Slide omhoog

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

Slide naar beneden

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

Zoom

Variabele	Standaard	Beschrijving
--vt-zoom-duration	200ms	Animatieduur
--vt-zoom-easing	cubic-bezier(0.4, 0, 0.2, 1)	Versnellingsfunctie
--vt-zoom-scale	0.8	Schaalfactor (oud zoomt naar deze, nieuw zoomt in vanaf deze)

Zoom uit

Variabele	Standaard	Beschrijving
--vt-zoom-out-duration	200ms	Animatieduur
--vt-zoom-out-easing	cubic-bezier(0.4, 0, 0.2, 1)	Versnellingsfunctie
--vt-zoom-out-scale	1.2	Schaalfactor (oud zoomt in naar deze, nieuw zoomt uit vanaf deze)

Variabelen overschrijven

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

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

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

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

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