Bemästra CSS View Transitions: En djupdykning i styling av pseudo-element

I det ständigt föränderliga landskapet av webbutveckling är strävan efter en sömlös, flytande och engagerande användarupplevelse en konstant. I åratal har utvecklare strävat efter att överbrygga klyftan mellan webben och native-applikationer, särskilt när det gäller smidigheten i sidövergångar. Traditionell webbnavigering resulterar ofta i en abrupt, helsidesomladdning – en tom vit skärm som tillfälligt bryter användarens immersion. Single-Page Applications (SPA) har mildrat detta, men att skapa anpassade, meningsfulla övergångar har förblivit en komplex och ofta skör uppgift, starkt beroende av JavaScript-bibliotek och invecklad tillståndshantering.

Här kommer CSS View Transitions API, en banbrytande teknologi redo att revolutionera hur vi hanterar UI-förändringar på webben. Detta kraftfulla API tillhandahåller en enkel men otroligt flexibel mekanism för att animera mellan olika DOM-tillstånd, vilket gör det enklare än någonsin att skapa de polerade, app-liknande upplevelser som användare har kommit att förvänta sig. Kärnan i detta API:s kraft ligger i en uppsättning nya CSS-pseudo-element. Dessa är inte dina typiska selektorer; de är dynamiska, temporära element som genereras av webbläsaren för att ge dig detaljerad kontroll över varje fas av en övergång. Denna guide kommer att ta dig på en djupdykning i detta pseudo-elementträd och utforska hur du stylar varje komponent för att bygga fantastiska, högpresterande och tillgängliga animationer för en global publik.

Anatomin av en View Transition

Innan vi kan styla en övergång måste vi förstå vad som händer under huven när en utlöses. När du initierar en view transition (till exempel genom att anropa document.startViewTransition()), utför webbläsaren en serie steg:

• Fånga det gamla tillståndet: Webbläsaren tar en "skärmdump" av den nuvarande sidans tillstånd.
• Uppdatera DOM: Din kod gör sedan sina ändringar i DOM (t.ex. navigerar till en ny vy, lägger till eller tar bort element).
• Fånga det nya tillståndet: När DOM-uppdateringen är klar tar webbläsaren en skärmdump av det nya tillståndet.
• Bygg pseudo-elementträdet: Webbläsaren konstruerar sedan ett temporärt träd av pseudo-element i sidans överlagring. Detta träd innehåller de fångade bilderna av de gamla och nya tillstånden.
• Animera: CSS-animationer tillämpas på dessa pseudo-element, vilket skapar en smidig övergång från det gamla tillståndet till det nya. Standard är en enkel övertoning (cross-fade).
• Städa upp: När animationerna är klara tas pseudo-elementträdet bort, och användaren kan interagera med det nya, levande DOM.

Nyckeln till anpassning är detta temporära pseudo-elementträd. Tänk på det som en uppsättning lager i ett designverktyg, tillfälligt placerade ovanpå din sida. Du har fullständig CSS-kontroll över dessa lager. Här är strukturen du kommer att arbeta med:

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

Låt oss gå igenom vad vart och ett av dessa pseudo-element representerar.

En genomgång av pseudo-elementen

::view-transition: Detta är roten till hela strukturen. Det är ett enda element som fyller visningsområdet (viewport) och ligger ovanpå allt annat innehåll på sidan. Det fungerar som behållare för alla övergångsgrupper och är en utmärkt plats att ställa in övergripande övergångsegenskaper som varaktighet eller tidsfunktion.

::view-transition-group(*): För varje distinkt övergångselement (identifierat av CSS-egenskapen view-transition-name) skapas en grupp. Detta pseudo-element ansvarar för att animera position och storlek på sitt innehåll. Om du har ett kort som flyttas från en sida av skärmen till en annan, är det ::view-transition-group som faktiskt flyttas.

::view-transition-image-pair(*): Inbäddat inuti gruppen fungerar detta element som en behållare och en klippmask (clipping mask) för de gamla och nya vyerna. Dess primära roll är att bibehålla effekter som border-radius eller transform under animationen och att hantera standardövergången med övertoning.

::view-transition-old(*): Detta representerar "skärmdumpen" eller den renderade vyn av elementet i sitt gamla tillstånd (före DOM-ändringen). Som standard animeras det från opacity: 1 till opacity: 0.

::view-transition-new(*): Detta representerar "skärmdumpen" eller den renderade vyn av elementet i sitt nya tillstånd (efter DOM-ändringen). Som standard animeras det från opacity: 0 till opacity: 1.

Roten: Att styla pseudo-elementet ::view-transition

Pseudo-elementet ::view-transition är duken på vilken hela din animation målas. Som den översta behållaren är det den idealiska platsen att definiera egenskaper som ska gälla globalt för övergången. Som standard tillhandahåller webbläsaren en uppsättning animationer, men du kan enkelt åsidosätta dem.

Till exempel är standardövergången en övertoning som varar 250 millisekunder. Om du vill ändra detta för varje övergång på din webbplats kan du rikta in dig på rot-pseudo-elementet:

::view-transition {

  animation-duration: 500ms;

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

}

Denna enkla regel gör nu att alla standardövergångar på sidan tar dubbelt så lång tid och använder en 'ease-in-out'-kurva, vilket ger dem en något annorlunda känsla. Även om du kan tillämpa komplexa animationer här, är det generellt bäst att använda det för att definiera universell timing och easing, och låta de mer specifika pseudo-elementen hantera den detaljerade koreografin.

Gruppering och namngivning: Kraften i `view-transition-name`

Utan extra arbete ger View Transition API en övertoning för hela sidan. Detta hanteras av en enda pseudo-elementgrupp för roten. API:ets verkliga kraft låses upp när du vill göra övergångar för specifika, enskilda element mellan tillstånd. Till exempel att få en produktminiatyr på en listsida att sömlöst växa och flytta sig till huvudproduktbildens position på en detaljsida.

För att berätta för webbläsaren att två element över olika DOM-tillstånd är konceptuellt desamma, använder du CSS-egenskapen view-transition-name. Denna egenskap måste tillämpas på både startelementet och slutelementet.

/* I CSS för listsidan */

.product-thumbnail {

  view-transition-name: product-image;

}

/* I CSS för detaljsidan */

.main-product-image {

  view-transition-name: product-image;

}

Genom att ge båda elementen samma unika namn ('product-image' i det här fallet), instruerar du webbläsaren: "Istället för att bara tona ut den gamla sidan och tona in den nya, skapa en speciell övergång för just detta element." Webbläsaren kommer nu att generera en dedikerad ::view-transition-group(product-image) för att hantera dess animation separat från rot-övergången. Detta är det grundläggande konceptet som möjliggör den populära "morfande" eller "shared element"-övergångseffekten.

Viktig anmärkning: För varje givet ögonblick under en övergång måste ett view-transition-name vara unikt. Du kan inte ha två synliga element med samma namn samtidigt.

Djupgående styling: Kärn-pseudo-elementen

Med våra element namngivna kan vi nu dyka in i att styla de specifika pseudo-element som webbläsaren genererar för dem. Det är här du kan skapa verkligt anpassade och uttrycksfulla animationer.

`::view-transition-group(name)`: Förflyttaren

Gruppens enda ansvar är att övergå från det gamla elementets storlek och position till det nya elementets storlek och position. Den innehåller inte det faktiska innehållets utseende, bara dess avgränsningsruta. Tänk på det som en rörlig ram.

Som standard animerar webbläsaren dess transform- och width/height-egenskaper. Du kan åsidosätta detta för att skapa olika effekter. Till exempel kan du lägga till en båge i dess rörelse genom att animera den längs en böjd bana, eller få den att skala upp och ner under sin resa.

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

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

}

I detta exempel tillämpar vi en specifik easing-funktion bara på produktbildens rörelse, vilket gör att den känns mer dynamisk och fysisk, utan att påverka standardövergången för resten av sidan.

`::view-transition-image-pair(name)`: Klipparen och tonaren

Inbäddat i den rörliga gruppen håller bildparet (image-pair) de gamla och nya vyerna. Det fungerar som en klippmask, så om ditt element har en border-radius, ser bildparet till att innehållet förblir klippt med den radien under hela storleks- och positionsanimationen. Dess andra huvudsakliga uppgift är att orkestrera standardövergången mellan det gamla och nya innehållet.

Du kanske vill styla detta element för att säkerställa visuell konsistens eller för att skapa mer avancerade effekter. En viktig egenskap att överväga är isolation: isolate. Detta är avgörande om du planerar att använda avancerade mix-blend-mode-effekter på barnen (gamla och nya), eftersom det skapar en ny staplingskontext och förhindrar att blandningen påverkar element utanför övergångsgruppen.

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

  isolation: isolate;

}

`::view-transition-old(name)` och `::view-transition-new(name)`: Stjärnorna i showen

Dessa är de pseudo-element som representerar det visuella utseendet på ditt element före och efter DOM-ändringen. Det är här det mesta av ditt anpassade animationsarbete kommer att ske. Som standard kör webbläsaren en enkel övertoningsanimation på dem med hjälp av opacity och mix-blend-mode. För att skapa en anpassad animation måste du först stänga av standardanimationen.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

När standardanimationen är inaktiverad är du fri att tillämpa din egen. Låt oss utforska några vanliga mönster.

Anpassad animation: Glidning (Slide)

Istället för en övertoning, låt oss få innehållet i en behållare att glida in. Till exempel, när vi navigerar mellan artiklar, vill vi att den nya artikelns text ska glida in från höger medan den gamla texten glider ut till vänster.

Först, definiera 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%); }

}

Tillämpa nu dessa animationer på de gamla och nya pseudo-elementen för det namngivna 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;

}

Anpassad animation: 3D-vändning (Flip)

För en mer dramatisk effekt kan du skapa en 3D-kortvändning. Detta kräver animering av transform-egenskapen med rotateY och även hantering av backface-visibility.

/* Gruppen behöver en 3D-kontext */

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

  transform-style: preserve-3d;

}

/* Även bildparet behöver bevara 3D-kontexten */

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

  transform-style: preserve-3d;

}

/* Den gamla vyn vänds från 0 till -180 grader */

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

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

  backface-visibility: hidden;

}

/* Den nya vyn vänds från 180 till 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); }

}

Praktiska exempel och avancerade tekniker

Teori är användbart, men det är genom praktisk tillämpning vi verkligen lär oss. Låt oss gå igenom några vanliga scenarier och hur man löser dem med view transition-pseudo-element.

Exempel: Den "morfande" kortminiatyren

Detta är den klassiska "shared element"-övergången. Föreställ dig ett galleri med användarprofiler. Varje profil är ett kort med en avatar. När du klickar på ett kort navigerar du till en detaljsida där samma avatar visas framträdande högst upp.

Steg 1: Tilldela namn

På din gallerisida får avatarbilden ett namn. Namnet bör vara unikt för varje kort, till exempel baserat på användarens ID.

/* I gallery-item.css */

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

På profildetaljsidan får den stora headern-avataren exakt samma namn.

/* I profile-page.css */

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

Steg 2: Anpassa animationen

Som standard kommer webbläsaren att flytta och skala avataren, men den kommer också att tona över innehållet. Om bilden är identisk är denna toning onödig och kan orsaka ett lätt flimmer. Vi kan inaktivera den.

/* Stjärnan (*) här är en jokertecken för alla namngivna grupper */

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

  /* Inaktivera standardtoningen */

  animation-duration: 0s;

}

Vänta, om vi inaktiverar toningen, hur byts innehållet? För delade element där de gamla och nya vyerna är identiska, är webbläsaren smart nog att använda bara en vy för hela övergången. `image-pair` håller i huvudsak bara en bild, så att inaktivera toningen avslöjar helt enkelt denna optimering. För element där innehållet faktiskt ändras skulle du behöva en anpassad animation istället för standardtoningen.

Hantering av ändrade bildförhållanden

En vanlig utmaning uppstår när ett övergångselement ändrar sitt bildförhållande. Till exempel kan en 16:9-landskapsminiatyr på en listsida övergå till en 1:1-kvadratisk avatar på detaljsidan. Webbläsarens standardbeteende är att animera bredd och höjd oberoende av varandra, vilket resulterar i att bilden ser hopklämd eller utsträckt ut under övergången.

Lösningen är elegant. Vi låter ::view-transition-group hantera storleks- och positionsändringen, men vi åsidosätter stylingen av de gamla och nya bilderna inuti den.

Målet är att få de gamla och nya "skärmdumparna" att fylla sin behållare utan att förvrängas. Vi kan göra detta genom att ställa in deras bredd och höjd till 100% och låta webbläsarens standardegenskap object-fit (som ärvs från det ursprungliga elementet) hantera skalningen korrekt.

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

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

  /* Förhindra förvrängning genom att fylla behållaren */

  width: 100%;

  height: 100%;

  

  /* Åsidosätt standardövergången för att se effekten tydligt */

  animation: none;

}

Med denna CSS kommer `image-pair` att smidigt animera sitt bildförhållande, och bilderna inuti kommer att beskäras eller få svarta kanter korrekt (beroende på deras `object-fit`-värde), precis som de skulle i en vanlig behållare. Du kan sedan lägga till dina egna anpassade animationer, som en övertoning, ovanpå denna korrigerade geometri.

Felsökning och webbläsarstöd

Att styla element som bara existerar under en bråkdel av en sekund kan vara knepigt. Lyckligtvis tillhandahåller moderna webbläsare utmärkta utvecklarverktyg för detta. I Chrome eller Edge DevTools kan du gå till panelen "Animations", och när du utlöser en view transition kan du pausa den. Med animationen pausad kan du sedan använda panelen "Elements" för att inspektera hela `::view-transition`-pseudo-elementträdet precis som vilken annan del av DOM som helst. Du kan se stilarna som tillämpas och till och med ändra dem i realtid för att finslipa dina animationer.

I slutet av 2023 stöds View Transitions API i Chromium-baserade webbläsare (Chrome, Edge, Opera). Implementeringar pågår för Firefox och Safari. Detta gör det till en perfekt kandidat för progressiv förbättring. Användare med webbläsare som stöds får en härlig, förbättrad upplevelse, medan användare på andra webbläsare får standard, omedelbar navigering. Du kan kontrollera för stöd i CSS:

@supports (view-transition: none) {

  /* Alla view-transition-stilar hamnar här */

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

}

Bästa praxis för en global publik

När man implementerar animationer är det avgörande att ta hänsyn till den mångfald av användare och enheter som finns världen över.

Prestanda: Animationer ska vara snabba och flytande. Håll dig till att animera CSS-egenskaper som är billiga för webbläsaren att bearbeta, främst transform och opacity. Att animera egenskaper som width, height eller margin kan utlösa omberäkningar av layouten på varje bildruta, vilket leder till hackande och en dålig upplevelse, särskilt på mindre kraftfulla enheter.

Tillgänglighet: Vissa användare upplever åksjuka eller obehag av animationer. Alla större operativsystem erbjuder en användarinställning för att minska rörelse. Vi måste respektera detta. Mediefrågan prefers-reduced-motion låter dig inaktivera eller förenkla dina animationer för dessa användare.

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

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Hoppa över alla anpassade animationer och använd en snabb, enkel toning */

    animation: none !important;

  }

}

Användarupplevelse (UX): Bra övergångar är meningsfulla. De ska guida användarens uppmärksamhet och ge kontext om den förändring som sker i gränssnittet. En animation som är för långsam kan få en applikation att kännas trög, medan en som är för prålig kan vara distraherande. Sikta på övergångstider mellan 200 ms och 500 ms. Målet är att animationen ska kännas mer än den ses.

Slutsats: Framtiden är flytande

CSS View Transitions API, och specifikt dess kraftfulla pseudo-elementträd, representerar ett monumentalt kliv framåt för webbens användargränssnitt. Det ger utvecklare en native, högpresterande och mycket anpassningsbar verktygslåda för att skapa den typ av flytande, tillståndsbaserade övergångar som en gång var exklusiva för native-applikationer. Genom att förstå rollerna för ::view-transition, ::view-transition-group och old/new-bildparen kan du gå bortom enkla övertoningar och koreografera invecklade, meningsfulla animationer som förbättrar användbarheten och glädjer användarna.

När webbläsarstödet expanderar kommer detta API att bli en väsentlig del av den moderna frontend-utvecklarens verktygslåda. Genom att omfamna dess kapabiliteter och följa bästa praxis för prestanda och tillgänglighet kan vi bygga en webb som inte bara är mer funktionell, utan också vackrare och mer intuitiv för alla, överallt.