View Transitions

Avaa ChatGPT:ssä

Java API

25.11 Experimental

View transitions tarjoavat animaatioita DOM:n muuttuessa, mikä vähentää visuaalista häiriötä ja ylläpitää tilallista kontekstia navigoinnin tai sisällön päivitysten aikana. webforJ integroituu selaimen View Transition API:hin käsitellen monimutkaisuudet, jotka liittyvät animaatioiden koordinointiin vanhojen ja uusien tilojen välillä.

Näytä koodi

Java

CSS

Kokeellinen API

Tämä API on merkitty kokeelliseksi alkaen 25.11 ja se saattaa muuttua tulevissa versioissa. API:n allekirjoitus, käyttäytyminen ja suorituskyky voivat muuttua.

Peruskäyttö

Luodaksesi näkymäsiirtymän, käytä Page.getCurrent().startViewTransition(), joka palauttaa rakentajan siirtymän määrittämiseksi:

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

Siirtymäprosessi ottaa kuvakaappauksen nykyisestä tilasta, soveltaa DOM-muutoksia onUpdate palautteessa ja animoidut vanhasta kuvasta uuteen sisältöön. Sinun on kutsuttava done.run(), jotta voit ilmoittaa kun muutoksesi ovat valmiit.

onUpdate palautteen asettaminen on pakollista

start() kutsuminen ilman päivityspalautteen asettamista heittää IllegalStateException.

Siirtymien soveltaminen

webforJ tarjoaa määriteltyjä siirtymätyyppejä, joita voit soveltaa DOM:iin tuleville tai sieltä poistuville komponenteille:

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

Käytä enter() animoidaksesi komponentin lisäämistä ja exit() animoidaksesi komponentin poistamista:

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

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

Jaetut komponenttisiirtymät

Jaetut komponenttisiirtymät luovat muuntumisen vaikutuksen, jossa komponentti näyttää siirtyvän vanhasta näkymästä uuteen näkymään. Tämä saavutetaan antamalla komponenteille sama siirtymän nimi käyttämällä setViewTransitionName()-metodia, joka on saatavilla kaikilla komponenteilla, jotka toteuttavat HasStyle-rajapinnan.

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

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

Kun siirrytään näiden näkymien välillä, selain animoi komponentin paikkojen välillä, luoden yhteyden kokenan visuaalisen kokemuksen.

Käytä ainutlaatuisia nimiä

Työskentelemällä luetteloiden tai toistettavien komponenttien kanssa, sisällytä ainutlaatuinen tunniste siirtymän nimeen. Jokaisella komponentilla on oltava oma erillinen nimi muuntaakseen oikein vastaavaan komponenttiin uudessa näkymässä. Samojen nimien käyttäminen useille näkyville komponenteille aiheuttaa määrittelemätöntä käyttäytymistä.

Näytä koodi

Java

CSS

Luettelon järjestyksen muuttaminen

Yksi yleinen käyttötapa jaetuissa komponenttisiirtymissä on luetteloiden animaatio, kun niiden järjestys muuttuu. Antamalla jokaiselle kohdalle ainutlaatuinen view-transition-name, selain animaatio automaattisesti siirtää komponentit uusiin paikkoihinsa:

// Jokaiselle kortille annetaan ainutlaatuinen siirtymän nimi sen ID:n perusteella
card.setViewTransitionName("card-" + item.id());

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

Näytä koodi

Java

CSS

Mukautetut CSS-animaatiot

Täydellisen hallinnan animaatioista voit määrittää mukautetut CSS-avainkehykset. webforJ liittää -enter tai -exit liitteet siirtymän nimiin, joita käytät kohdaten näkymäsiirtymän pseudo-elementit:

/* Määritä avainkehykset komponenttien lisäämiseksi */
@keyframes flip-enter {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
  }
}

/* Sovella näkymä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;
}

Viittaa mukautettuun animaatioosi käyttämällä sen nimeä (ilman liitettä) enter() tai exit():

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

// Käytä "blur-out" poistumiseen - 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-mukautukset

Jokainen ennalta määritelty siirtymätyyppi esittelee CSS-mukautusominaisuuksia hienosäätöä varten:

Fade

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

Liuku vasemmalle

Muuttuja	Oletus	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	Oletus	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ös

Muuttuja	Oletus	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 alas

Muuttuja	Oletus	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	Oletus	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	Mittakaavatekijä (vanha zoomaa tästä, uusi zoomaa sisään tästä)

Zoom-out

Muuttuja	Oletus	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	Mittakaavatekijä (vanha zoomaa sisään tähän, uusi zoomaa ulos tästä)

Muuttujien korvaaminen

Mukautuksena, voit ylittää nämä muuttujat CSS:ssäsi:

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

Edistykselliseen mukautukseen, kohdenna näkymäsiirtymän pseudo-elementit suoraan:

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

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