View Transitions

Avaa ChatGPT:ssä

Java API

25.11 Koe-aloite

View transitions provide animated transitions when the DOM changes, reducing visual jarring and maintaining spatial context during navigation or content updates. webforJ integrates with the browser's View Transition API to handle the complexity of coordinating animations between old and new states.

Näytä koodi

Java

CSS

Experimental feature

This feature is experimental and may change or be removed in a future release.

Perus käyttö

To create a view transition, use Page.getCurrent().startViewTransition(), which returns a builder for configuring the transition:

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

The transition process captures a snapshot of the current state, applies your DOM changes in the onUpdate callback, then animates from the old snapshot to the new content. You must call done.run() to signal when your changes are complete.

onUpdate-kokoukset ovat pakollisia

Calling start() without setting an update callback throws an IllegalStateException.

Siirtymien soveltaminen

webforJ provides predefined transition types that you can apply to components entering or exiting the DOM:

Vakio	Vaikutus
ViewTransition.NONE	Ei animaatiota
ViewTransition.FADE	Ristiin haalistuminen vanhan ja uuden sisällön välillä
ViewTransition.SLIDE_LEFT	Sisältö liikkuu vasemmalle (kuten eteenpäin navigointi)
ViewTransition.SLIDE_RIGHT	Sisältö liikkuu oikealle (kuten taaksepäin navigointi)
ViewTransition.SLIDE_UP	Sisältö liikkuu ylöspäin
ViewTransition.SLIDE_DOWN	Sisältö liikkuu alaspäin
ViewTransition.ZOOM	Vanha sisältö kutistuu ja uusi sisältö kasvaa
ViewTransition.ZOOM_OUT	Vanha sisältö kasvaa pois ja uusi sisältö kutistuu

Use enter() to animate a component being added and exit() to animate a component being removed:

// Animaatio komponentin lisäämiselle DOM:iin
Page.getCurrent().startViewTransition()
  .enter(chatPanel, ViewTransition.ZOOM)
  .onUpdate(done -> {
    container.add(chatPanel);
    done.run();
  })
  .start();

// Animaatio komponentin poistamiselle DOM:ista
Page.getCurrent().startViewTransition()
  .exit(chatPanel, ViewTransition.FADE)
  .onUpdate(done -> {
    container.remove(chatPanel);
    done.run();
  })
  .start();

Jaetun komponentin siirtymät

Shared component transitions create a morphing effect where a component appears to transform from its position in the old view to its position in the new view. Tämä saavutetaan antamalla komponenteille sama siirtymien nimi käyttäen setViewTransitionName()-metodia, joka on saatavilla kaikilla komponenteilla, jotka toteuttavat HasStyle -rajapinnan.

// Korttinäkymässä
image.setViewTransitionName("blog-image");

// Yksityiskohdanäkymässä - sama nimi luo morphin
image.setViewTransitionName("blog-image");

When transitioning between these views, the browser animates the component between positions, creating a connected visual experience.

Käytä ainutlaatuisia nimiä

When working with lists or repeated components, include a unique identifier in the transition name. Each component requires its own distinct name to morph correctly to its corresponding component in the new view. Using the same name for multiple visible components causes undefined behavior.

Näytä koodi

Java

CSS

Luettelon uudelleenjärjestäminen

A common use case for shared component transitions is animating list items when their order changes. By assigning a unique view-transition-name to each item, the browser automatically animates components to their new positions:

// Jokaiselle kortille annetaan ainutlaatuinen siirtymisen nimi perustuen sen ID:hen
card.setViewTransitionName("card-" + item.id());

// Kun sekoitetaan, päivitä vain DOM - selain käsittelee animaation
Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    renderList();
    done.run();
  })
  .start();

Näytä koodi

Java

CSS

Mukautetut CSS-animaatiot

For full control over animations, you can define custom CSS keyframes. webforJ appends -enter or -exit suffixes to your transition names, which you use to target the view transition pseudo-elements:

/* Määritellään avainkehykset komponenttien sisäänkäynnille */
@keyframes flip-enter {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
  }
}

/* Käytä siirtymän pseudo-elementtiin */
::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;
}

Reference your custom animation by passing its name (without the suffix) to enter() or exit():

// Käytä "flip-in" - webforJ lisää "-enter" -liitteen automaattisesti
Page.getCurrent().startViewTransition()
  .enter(notification, "flip-in")
  .onUpdate(done -> {
    stage.add(notification);
    done.run();
  })
  .start();

// Käytä "blur-out" poistuttaessa - webforJ lisää "-exit" -liitteen
Page.getCurrent().startViewTransition()
  .exit(notification, "blur-out")
  .onUpdate(done -> {
    stage.remove(notification);
    done.run();
  })
  .start();

Näytä koodi

Java

CSS

CSS-mukautus

Each predefined transition type exposes CSS custom properties for fine-tuning:

Haalea

Muuttuja	Oletusarvo	Kuvaus
--vt-fade-duration	200ms	Animaation kesto
--vt-fade-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio

Liuku vasemmalle

Muuttuja	Oletusarvo	Kuvaus
--vt-slide-left-duration	200ms	Animaation kesto
--vt-slide-left-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio
--vt-slide-left-distance	30%	Liukumatka

Liuku oikealle

Muuttuja	Oletusarvo	Kuvaus
--vt-slide-right-duration	200ms	Animaation kesto
--vt-slide-right-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio
--vt-slide-right-distance	30%	Liukumatka

Liuku ylöspäin

Muuttuja	Oletusarvo	Kuvaus
--vt-slide-up-duration	200ms	Animaation kesto
--vt-slide-up-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio
--vt-slide-up-distance	30%	Liukumatka

Liuku alaspäin

Muuttuja	Oletusarvo	Kuvaus
--vt-slide-down-duration	200ms	Animaation kesto
--vt-slide-down-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio
--vt-slide-down-distance	30%	Liukumatka

Zoom

Muuttuja	Oletusarvo	Kuvaus
--vt-zoom-duration	200ms	Animaation kesto
--vt-zoom-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio
--vt-zoom-scale	0.8	Skaalakerroin (vanha zoomaa ulos tästä, uusi zoomaa sisään tästä)

Zoom ulos

Muuttuja	Oletusarvo	Kuvaus
--vt-zoom-out-duration	200ms	Animaation kesto
--vt-zoom-out-easing	cubic-bezier(0.4, 0, 0.2, 1)	Easing-funktio
--vt-zoom-out-scale	1.2	Skaalakerroin (vanha zoomaa sisään tähän, uusi zoomaa ulos tästä)

Muuttujien ylikirjoittaminen

To customize, override these variables in your CSS:

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

For advanced customization, target the view transition pseudo-elements directly:

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

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