Mestre CSS View Transitions: En dybdeanalyse av styling med pseudo-elementer

I det stadig utviklende landskapet for webutvikling er jakten på en sømløs, flytende og engasjerende brukeropplevelse en konstant. I årevis har utviklere strebet etter å bygge bro over gapet mellom web og native applikasjoner, spesielt når det gjelder jevne sideoverganger. Tradisjonell webnavigasjon resulterer ofte i en brå, fullstendig sideinnlasting – en blank hvit skjerm som midlertidig bryter brukerens innlevelse. Enkelsideapplikasjoner (SPA-er) har dempet dette, men å skape tilpassede, meningsfulle overganger har forblitt en kompleks og ofte skjør oppgave, sterkt avhengig av JavaScript-biblioteker og intrikat tilstandshåndtering.

Her kommer CSS View Transitions API, en banebrytende teknologi som er klar til å revolusjonere hvordan vi håndterer UI-endringer på nettet. Dette kraftige API-et gir en enkel, men utrolig fleksibel mekanisme for å animere mellom ulike DOM-tilstander, noe som gjør det enklere enn noensinne å skape de polerte, app-lignende opplevelsene brukere har kommet til å forvente. Kjernen i dette API-ets kraft ligger et sett med nye CSS pseudo-elementer. Disse er ikke dine typiske selektorer; de er dynamiske, midlertidige elementer generert av nettleseren for å gi deg detaljert kontroll over hver fase av en overgang. Denne guiden vil ta deg med på en dybdeanalyse av dette pseudo-elementtreet, og utforske hvordan du kan style hver komponent for å bygge fantastiske, ytelseseffektive og tilgjengelige animasjoner for et globalt publikum.

Anatomien til en View Transition

Før vi kan style en overgang, må vi forstå hva som skjer under panseret når en utløses. Når du starter en view transition (for eksempel ved å kalle document.startViewTransition()), utfører nettleseren en rekke trinn:

• Fange gammel tilstand: Nettleseren tar et "skjermbilde" av sidens nåværende tilstand.
• Oppdatere DOM: Koden din gjør deretter endringene i DOM (f.eks. navigerer til en ny visning, legger til eller fjerner elementer).
• Fange ny tilstand: Når DOM-oppdateringen er fullført, tar nettleseren et skjermbilde av den nye tilstanden.
• Bygge pseudo-elementtreet: Nettleseren konstruerer deretter et midlertidig tre av pseudo-elementer i sidens overlegg. Dette treet inneholder de fangede bildene av den gamle og nye tilstanden.
• Animere: CSS-animasjoner brukes på disse pseudo-elementene, noe som skaper en jevn overgang fra den gamle tilstanden til den nye. Standarden er en enkel krysstoning (cross-fade).
• Opprydding: Når animasjonene er fullført, fjernes pseudo-elementtreet, og brukeren kan samhandle med den nye, levende DOM-en.

Nøkkelen til tilpasning er dette midlertidige pseudo-elementtreet. Tenk på det som et sett med lag i et designverktøy, midlertidig plassert på toppen av siden din. Du har fullstendig CSS-kontroll over disse lagene. Her er strukturen du vil jobbe med:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

La oss bryte ned hva hvert av disse pseudo-elementene representerer.

Rollesettet av pseudo-elementer

::view-transition: Dette er roten til hele strukturen. Det er et enkelt element som fyller visningsporten og ligger over alt annet sideinnhold. Det fungerer som beholderen for alle overgangsgrupper og er et flott sted å sette overordnede overgangsegenskaper som varighet eller tidsfunksjon.

::view-transition-group(*): For hvert distinkte overgangselement (identifisert med CSS-egenskapen view-transition-name) opprettes en gruppe. Dette pseudo-elementet er ansvarlig for å animere posisjonen og størrelsen på innholdet sitt. Hvis du har et kort som beveger seg fra den ene siden av skjermen til den andre, er det ::view-transition-group som faktisk beveger seg.

::view-transition-image-pair(*): Plassert inne i gruppen, fungerer dette elementet som en beholder og en klippemaske for den gamle og nye visningen. Hovedrollen er å opprettholde effekter som border-radius eller transform under animasjonen og å håndtere den standard krysstoningsanimasjonen.

::view-transition-old(*): Dette representerer "skjermbildet" eller den gjengitte visningen av elementet i sin gamle tilstand (før DOM-endringen). Som standard animeres det fra opacity: 1 til opacity: 0.

::view-transition-new(*): Dette representerer "skjermbildet" eller den gjengitte visningen av elementet i sin nye tilstand (etter DOM-endringen). Som standard animeres det fra opacity: 0 til opacity: 1.

Roten: Styling av ::view-transition pseudo-elementet

Pseudo-elementet ::view-transition er lerretet som hele animasjonen din males på. Som den øverste beholderen er det det ideelle stedet å definere egenskaper som skal gjelde globalt for overgangen. Som standard tilbyr nettleseren et sett med animasjoner, men du kan enkelt overstyre dem.

For eksempel er standardovergangen en krysstoning som varer i 250 millisekunder. Hvis du vil endre dette for hver overgang på nettstedet ditt, kan du målrette rot-pseudo-elementet:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

Denne enkle regelen gjør nå at alle standard sideoverganger tar dobbelt så lang tid og bruker en 'ease-in-out'-kurve, noe som gir dem en litt annerledes følelse. Selv om du kan bruke komplekse animasjoner her, er det generelt best brukt til å definere universell timing og easing, og la de mer spesifikke pseudo-elementene håndtere den detaljerte koreografien.

Gruppering og navngiving: Kraften i `view-transition-name`

Rett ut av boksen, uten ekstra arbeid, gir View Transition API en krysstoning for hele siden. Dette håndteres av en enkelt pseudo-elementgruppe for roten. Den virkelige kraften i API-et låses opp når du vil lage overganger for spesifikke, individuelle elementer mellom tilstander. For eksempel, å få et produktminiatyrbilde på en listeside til å sømløst vokse og flytte seg inn i hovedproduktbildets posisjon på en detaljside.

For å fortelle nettleseren at to elementer på tvers av forskjellige DOM-tilstander er konseptuelt det samme, bruker du CSS-egenskapen view-transition-name. Denne egenskapen må brukes på både startelementet og sluttelementet.

/* På listesidens CSS */

.product-thumbnail {

  view-transition-name: product-image;

}

/* På detaljsidens CSS */

.main-product-image {

  view-transition-name: product-image;

}

Ved å gi begge elementene det samme unike navnet ('product-image' i dette tilfellet), instruerer du nettleseren: "I stedet for å bare tone ut den gamle siden og tone inn den nye, lag en spesiell overgang for dette spesifikke elementet." Nettleseren vil nå generere en dedikert ::view-transition-group(product-image) for å håndtere animasjonen separat fra rot-toningen. Dette er det grunnleggende konseptet som muliggjør den populære "morphing" eller "delt element"-overgangseffekten.

Viktig merknad: For et gitt øyeblikk under en overgang, må et view-transition-name være unikt. Du kan ikke ha to synlige elementer med samme navn samtidig.

Dybdestyling: Kjerne-pseudo-elementene

Med elementene våre navngitt, kan vi nå dykke ned i stylingen av de spesifikke pseudo-elementene som nettleseren genererer for dem. Det er her du kan skape virkelig tilpassede og uttrykksfulle animasjoner.

`::view-transition-group(name)`: Bevegeren

Gruppens eneste ansvar er å gå over fra det gamle elementets størrelse og posisjon til det nye elementets størrelse og posisjon. Den inneholder ikke det faktiske innholdets utseende, bare dets begrensningsboks. Tenk på det som en bevegelig ramme.

Som standard animerer nettleseren dens transform- og width/height-egenskaper. Du kan overstyre dette for å skape forskjellige effekter. For eksempel kan du legge til en bue i bevegelsen ved å animere den langs en buet bane, eller få den til å skalere opp og ned på reisen.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

I dette eksemplet bruker vi en spesifikk easing-funksjon kun på bevegelsen til produktbildet, noe som gjør at det føles mer dynamisk og fysisk, uten å påvirke den standard toningen av resten av siden.

`::view-transition-image-pair(name)`: Klipperen og toneren

Plassert inne i den bevegelige gruppen, holder image-pair den gamle og nye visningen. Den fungerer som en klippemaske, så hvis elementet ditt har en border-radius, sikrer image-pair at innholdet forblir klippet med den radien gjennom hele størrelses- og posisjonsanimasjonen. Den andre hovedjobben er å orkestrere den standard krysstoningen mellom det gamle og nye innholdet.

Du vil kanskje style dette elementet for å sikre visuell konsistens eller for å skape mer avanserte effekter. En nøkkelegenskap å vurdere er isolation: isolate. Dette er avgjørende hvis du planlegger å bruke avanserte mix-blend-mode-effekter på barna (gammelt og nytt), da det skaper en ny stabelkontekst og forhindrer at blandingen påvirker elementer utenfor overgangsgruppen.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` og `::view-transition-new(name)`: Showets stjerner

Dette er pseudo-elementene som representerer det visuelle utseendet til elementet ditt før og etter DOM-endringen. Det er her det meste av ditt tilpassede animasjonsarbeid vil skje. Som standard kjører nettleseren en enkel krysstoningsanimasjon på dem ved hjelp av opacity og mix-blend-mode. For å lage en tilpasset animasjon, må du først slå av den standard.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Når standardanimasjonen er deaktivert, står du fritt til å bruke din egen. La oss utforske noen vanlige mønstre.

Tilpasset animasjon: Slide

I stedet for en krysstoning, la oss få innholdet i en beholder til å gli inn. For eksempel, når vi navigerer mellom artikler, vil vi at den nye artikkelens tekst skal gli inn fra høyre mens den gamle teksten glir ut til venstre.

Først, definer keyframes:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Bruk nå disse animasjonene på de gamle og nye pseudo-elementene for det navngitte elementet 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Tilpasset animasjon: 3D-flipp

For en mer dramatisk effekt kan du lage en 3D-kortflipp. Dette krever animering av transform-egenskapen med rotateY og også håndtering av backface-visibility.

/* Gruppen trenger en 3D-kontekst */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* Image-pair må også bevare 3D-konteksten */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Den gamle visningen flipper fra 0 til -180 grader */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Den nye visningen flipper fra 180 til 0 grader */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Praktiske eksempler og avanserte teknikker

Teori er nyttig, men det er gjennom praktisk anvendelse vi virkelig lærer. La oss gå gjennom noen vanlige scenarier og hvordan vi kan løse dem med view transition pseudo-elementer.

Eksempel: Det "morfende" kortminiatyrbildet

Dette er den klassiske overgangen med delt element. Se for deg et galleri med brukerprofiler. Hver profil er et kort med en avatar. Når du klikker på et kort, navigerer du til en detaljside der den samme avataren vises fremtredende øverst.

Steg 1: Tildel navn

På gallerisiden din får avatarbildet et navn. Navnet bør være unikt for hvert kort, for eksempel basert på brukerens ID.

/* I gallery-item.css */

.card-avatar { view-transition-name: avatar-user-123; }

På profildetaljsiden får den store header-avataren nøyaktig samme navn.

/* I profile-page.css */

.profile-header-avatar { view-transition-name: avatar-user-123; }

Steg 2: Tilpass animasjonen

Som standard vil nettleseren flytte og skalere avataren, men den vil også krysstone innholdet. Hvis bildet er identisk, er denne toningen unødvendig og kan forårsake et lett flimmer. Vi kan deaktivere den.

/* Stjernen (*) her er en joker for enhver navngitt gruppe */

::view-transition-image-pair(*) {

  /* Deaktiver standardtoningen */

  animation-duration: 0s;

}

Vent, hvis vi deaktiverer toningen, hvordan bytter innholdet? For delte elementer der den gamle og nye visningen er identiske, er nettleseren smart nok til å bruke bare én visning for hele overgangen. `image-pair` holder i hovedsak bare ett bilde, så å deaktivere toningen avslører bare denne optimaliseringen. For elementer der innholdet faktisk endres, trenger du en tilpasset animasjon i stedet for standardtoningen.

Håndtering av endringer i sideforhold

En vanlig utfordring oppstår når et element i overgang endrer sideforhold. For eksempel kan et 16:9 landskapsminiatyrbilde på en listeside gå over til en 1:1 kvadratisk avatar på detaljsiden. Nettleserens standardoppførsel er å animere bredde og høyde uavhengig, noe som resulterer i at bildet ser klemt sammen eller strukket ut under overgangen.

Løsningen er elegant. Vi lar ::view-transition-group håndtere størrelses- og posisjonsendringen, men vi overstyrer stylingen av de gamle og nye bildene inni den.

Målet er å få de gamle og nye "skjermbildene" til å fylle beholderen sin uten å forvrenge. Vi kan gjøre dette ved å sette bredden og høyden deres til 100% og la nettleserens standard object-fit-egenskap (som arves fra det opprinnelige elementet) håndtere skaleringen korrekt.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Forhindre forvrengning ved å fylle beholderen */

  width: 100%;

  height: 100%;

  

  /* Overstyr standard krysstoning for å se effekten tydelig */

  animation: none;

}

Med denne CSS-en vil `image-pair` jevnt animere sideforholdet sitt, og bildene inni vil bli korrekt beskåret eller få "letterboxing" (avhengig av deres `object-fit`-verdi), akkurat som de ville gjort i en vanlig beholder. Du kan deretter legge til dine egne tilpassede animasjoner, som en krysstoning, oppå denne korrigerte geometrien.

Debugging og nettleserstøtte

Å style elementer som bare eksisterer i en brøkdel av et sekund kan være vanskelig. Heldigvis gir moderne nettlesere utmerkede utviklerverktøy for dette. I Chrome eller Edge DevTools kan du gå til "Animations"-panelet, og når du utløser en view transition, kan du pause den. Med animasjonen pauset, kan du deretter bruke "Elements"-panelet til å inspisere hele `::view-transition` pseudo-elementtreet akkurat som enhver annen del av DOM. Du kan se stilene som brukes og til og med endre dem i sanntid for å perfeksjonere animasjonene dine.

Per sent 2023 er View Transitions API støttet i Chromium-baserte nettlesere (Chrome, Edge, Opera). Implementeringer er i gang for Firefox og Safari. Dette gjør det til en perfekt kandidat for progressiv forbedring. Brukere med støttede nettlesere får en herlig, forbedret opplevelse, mens brukere på andre nettlesere får den standard, umiddelbare navigasjonen. Du kan sjekke for støtte i CSS:

@supports (view-transition: none) {

  /* Alle view-transition-stiler går her */

  ::view-transition-old(my-element) { ... }

}

Beste praksis for et globalt publikum

Når man implementerer animasjoner, er det avgjørende å ta hensyn til det mangfoldige spekteret av brukere og enheter over hele verden.

Ytelse: Animasjoner bør være raske og flytende. Hold deg til å animere CSS-egenskaper som er billige for nettleseren å behandle, primært transform og opacity. Å animere egenskaper som width, height eller margin kan utløse layout-rekalkuleringer på hver ramme, noe som fører til hakking og en dårlig opplevelse, spesielt på mindre kraftige enheter.

Tilgjengelighet: Noen brukere opplever reisesyke eller ubehag fra animasjoner. Alle store operativsystemer tilbyr en brukerpreferanse for å redusere bevegelse. Vi må respektere dette. Mediespørringen prefers-reduced-motion lar deg deaktivere eller forenkle animasjonene dine for disse brukerne.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Hopp over alle tilpassede animasjoner og bruk en rask, enkel toning */

    animation: none !important;

  }

}

Brukeropplevelse (UX): Gode overganger er formålsrettede. De skal veilede brukerens oppmerksomhet og gi kontekst om endringen som skjer i brukergrensesnittet. En animasjon som er for treg kan få en applikasjon til å føles treg, mens en som er for prangende kan være distraherende. Sikt på overgangsvarigheter mellom 200ms og 500ms. Målet er at animasjonen skal føles mer enn den sees.

Konklusjon: Fremtiden er flytende

CSS View Transitions API, og spesifikt dets kraftige pseudo-elementtre, representerer et monumentalt sprang fremover for web-brukergrensesnitt. Det gir utviklere et native, ytelseseffektivt og høyt tilpassbart verktøysett for å skape den typen flytende, tilstandsbevisste overganger som en gang var eksklusivt for native applikasjoner. Ved å forstå rollene til ::view-transition, ::view-transition-group, og old/new image-parene, kan du bevege deg utover enkle toninger og koreografere intrikate, meningsfulle animasjoner som forbedrer brukervennligheten og gleder brukerne.

Ettersom nettleserstøtten utvides, vil dette API-et bli en essensiell del av den moderne front-end-utviklerens verktøykasse. Ved å omfavne dets kapabiliteter og følge beste praksis for ytelse og tilgjengelighet, kan vi bygge et web som ikke bare er mer funksjonelt, men også vakrere og mer intuitivt for alle, overalt.