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 inhoudsupdates 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 staten te beheren.

Toon Code

ViewTransitionChatView.java

chat.css

samples.views.viewtransitions.components.ChatCard.java

chat-card.css

DemoHeader.java

demo-header.css

Experimentele functie

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

Gebruik Page.getCurrent().startViewTransition() om een overgang te creëren, die 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

Het aanroepen van start() zonder een update callback in te stellen, werpt een IllegalStateException.

Toepassen van overgangen

webforJ biedt gedefinieerde overgangstypen die u kunt toepassen op componenten die in of uit de DOM gaan:

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

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

// Animeer een component die in 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 morfingseffect 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 elke component die de HasStyle interface implementeert.

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

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

Bij het overgaan tussen deze weergaven, animeert de browser de component tussen posities, waardoor een verbonden visuele ervaring ontstaat.

Gebruik unieke namen

Wanneer u met lijsten of herhaalde componenten werkt, voeg een unieke identificatie toe aan de overgangsnaam. Elke component heeft een eigen unieke naam nodig om correct naar de bijbehorende component in de nieuwe weergave te morfen. Het gebruik van dezelfde naam voor meerdere zichtbare componenten veroorzaakt onbepaald gedrag.

Toon Code

ViewTransitionMorphView.java

morph.css

BlogCard.java

BlogDetail.java

blog-card.css

DemoHeader.java

demo-header.css

Lijst herordenen

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 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 de animatie
Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    renderList();
    done.run();
  })
  .start();

Toon Code

ViewTransitionShuffleView.java

shuffle.css

ShuffleCard.java

shuffle-card.css

DemoHeader.java

demo-header.css

Aangepaste CSS-animaties

Voor volledige controle over animaties kunt u aangepaste CSS-keyframes definiëren. webforJ voegt de suffixen -enter of -exit toe aan uw overgangs namen, die u gebruikt om de pseudo-elementen van de weergaveovergang aan te spreken:

/* 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 uw aangepaste animatie door de naam (zonder de suffix) door te geven aan enter() of exit():

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

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

Toon Code

ViewTransitionEnterExitView.java

enterexit.css

NotificationCard.java

notification-card.css

DemoHeader.java

demo-header.css

CSS-aanpassing

Elke gedefinieerde overgangstype exposeert CSS-aangepaste eigenschappen voor fijne afstemming:

Vervagen

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

Slide naar links

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

Slide naar rechts

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

Slide omhoog

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

Slide omlaag

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

Zoom

Variabele	Standaard	Beschrijving
--vt-zoom-duration	200ms	Animatieduur
--vt-zoom-easing	cubic-bezier(0.4, 0, 0.2, 1)	Verzendfunctie
--vt-zoom-scale	0.8	Schaalfactor (oude zoomt uit naar dit, nieuwe zoomt in vanaf dit)

Zoom uit

Variabele	Standaard	Beschrijving
--vt-zoom-out-duration	200ms	Animatieduur
--vt-zoom-out-easing	cubic-bezier(0.4, 0, 0.2, 1)	Verzendfunctie
--vt-zoom-out-scale	1.2	Schaalfactor (oude zoomt in naar dit, nieuwe zoomt uit vanaf dit)

Variabelen overschrijven

Om aan te passen, overschrijft u deze variabelen in uw CSS:

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

Voor geavanceerde aanpassing, richt u zich rechtstreeks op de pseudo-elementen van de weergaveovergang:

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

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