Mistrovství v CSS View Transitions: Hloubkový pohled na stylování pseudo-elementů

V neustále se vyvíjejícím světě webového vývoje je snaha o bezproblémový, plynulý a poutavý uživatelský zážitek konstantou. Po léta se vývojáři snažili překlenout propast mezi webem a nativními aplikacemi, zejména pokud jde o plynulost přechodů mezi stránkami. Tradiční webová navigace často vede k drsnému, úplnému znovunačtení stránky – prázdné bílé obrazovce, která na okamžik naruší ponoření uživatele. Jednostránkové aplikace (SPA) tento problém zmírnily, ale vytváření vlastních, smysluplných přechodů zůstalo složitým a často křehkým úkolem, silně závislým na JavaScriptových knihovnách a složité správě stavu.

Přichází CSS View Transitions API, převratná technologie, která má způsobit revoluci v tom, jak přistupujeme ke změnám UI na webu. Toto mocné API poskytuje jednoduchý, ale neuvěřitelně flexibilní mechanismus pro animaci mezi různými stavy DOM, což usnadňuje více než kdy jindy vytváření uhlazených, aplikacím podobných zážitků, které uživatelé očekávají. Srdcem síly tohoto API je sada nových CSS pseudo-elementů. Nejsou to vaše typické selektory; jsou to dynamické, dočasné prvky generované prohlížečem, které vám dávají detailní kontrolu nad každou fází přechodu. Tento průvodce vás provede hloubkovým ponorem do tohoto stromu pseudo-elementů a prozkoumá, jak stylovat každou komponentu k vytvoření ohromujících, výkonných a přístupných animací pro globální publikum.

Anatomie View Transition

Než budeme moci přechod stylovat, musíme pochopit, co se děje pod kapotou, když je spuštěn. Když iniciujete view transition (například voláním document.startViewTransition()), prohlížeč provede řadu kroků:

• Zaznamenání starého stavu: Prohlížeč pořídí „snímek obrazovky“ aktuálního stavu stránky.
• Aktualizace DOM: Váš kód poté provede změny v DOM (např. přechod na nový pohled, přidání nebo odebrání prvků).
• Zaznamenání nového stavu: Jakmile je aktualizace DOM dokončena, prohlížeč pořídí snímek obrazovky nového stavu.
• Sestavení stromu pseudo-elementů: Prohlížeč poté sestaví dočasný strom pseudo-elementů v překryvné vrstvě stránky. Tento strom obsahuje zachycené obrázky starého a nového stavu.
• Animace: Na tyto pseudo-elementy jsou aplikovány CSS animace, které vytvářejí plynulý přechod ze starého stavu do nového. Výchozí je jednoduché prolínání (cross-fade).
• Úklid: Jakmile jsou animace dokončeny, strom pseudo-elementů je odstraněn a uživatel může interagovat s novým, živým DOM.

Klíčem k přizpůsobení je tento dočasný strom pseudo-elementů. Představte si ho jako sadu vrstev v návrhářském nástroji, dočasně umístěnou nad vaší stránkou. Máte nad těmito vrstvami úplnou kontrolu pomocí CSS. Zde je struktura, se kterou budete pracovat:

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

Pojďme si rozebrat, co každý z těchto pseudo-elementů představuje.

Představení pseudo-elementů

::view-transition: Toto je kořen celé struktury. Je to jediný prvek, který vyplňuje viewport a sedí nad veškerým ostatním obsahem stránky. Funguje jako kontejner pro všechny přecházející skupiny a je skvělým místem pro nastavení celkových vlastností přechodu, jako je trvání nebo časovací funkce.

::view-transition-group(*): Pro každý odlišný přecházející prvek (identifikovaný CSS vlastností view-transition-name) je vytvořena skupina. Tento pseudo-element je zodpovědný za animaci pozice a velikosti svého obsahu. Pokud máte kartu, která se přesouvá z jedné strany obrazovky na druhou, je to právě ::view-transition-group, co se ve skutečnosti pohybuje.

::view-transition-image-pair(*): Vnořený uvnitř skupiny, tento prvek funguje jako kontejner a ořezová maska pro starý a nový pohled. Jeho primární rolí je udržovat efekty jako border-radius nebo transform během animace a zpracovávat výchozí prolínací animaci (cross-fade).

::view-transition-old(*): Tento představuje „snímek obrazovky“ nebo vykreslený pohled na prvek v jeho starém stavu (před změnou DOM). Ve výchozím nastavení animuje z opacity: 1 na opacity: 0.

::view-transition-new(*): Tento představuje „snímek obrazovky“ nebo vykreslený pohled na prvek v jeho novém stavu (po změně DOM). Ve výchozím nastavení animuje z opacity: 0 na opacity: 1.

Kořen: Stylování pseudo-elementu ::view-transition

Pseudo-element ::view-transition je plátno, na kterém je namalována celá vaše animace. Jako kontejner nejvyšší úrovně je ideálním místem pro definování vlastností, které by se měly vztahovat globálně na přechod. Ve výchozím nastavení prohlížeč poskytuje sadu animací, ale můžete je snadno přepsat.

Například výchozí přechod je prolínání (cross-fade), které trvá 250 milisekund. Pokud to chcete změnit pro každý přechod na vašem webu, můžete cílit na kořenový pseudo-element:

::view-transition {

  animation-duration: 500ms;

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

}

Toto jednoduché pravidlo nyní způsobí, že všechna výchozí prolínání stránek budou trvat dvakrát déle a použijí křivku 'ease-in-out', což jim dodá mírně odlišný pocit. I když zde můžete použít složité animace, obecně je nejlepší ho používat pro definování univerzálního načasování a zrychlení, a nechat specifičtější pseudo-elementy, aby se postaraly o detailní choreografii.

Seskupování a pojmenování: Síla vlastnosti `view-transition-name`

Bez jakékoliv další práce poskytuje View Transition API prolínání celé stránky. To je řešeno jedinou skupinou pseudo-elementů pro kořen. Skutečná síla API se odemyká, když chcete přecházet mezi konkrétními, jednotlivými prvky. Například plynulé zvětšení a přesunutí náhledu produktu na stránce se seznamem do pozice hlavního obrázku produktu na stránce s detaily.

Abychom prohlížeči řekli, že dva prvky v různých stavech DOM jsou koncepčně stejné, použijeme CSS vlastnost view-transition-name. Tuto vlastnost je nutné aplikovat jak na počáteční, tak na koncový prvek.

/* V CSS stránky se seznamem */

.product-thumbnail {

  view-transition-name: product-image;

}

/* V CSS stránky s detailem */

.main-product-image {

  view-transition-name: product-image;

}

Tím, že oběma prvkům dáte stejné unikátní jméno ('product-image' v tomto případě), instruujete prohlížeč: „Místo pouhého ztmavení staré stránky a prolnutí nové vytvoř speciální přechod pro tento konkrétní prvek.“ Prohlížeč nyní vygeneruje vyhrazenou skupinu ::view-transition-group(product-image), která bude zpracovávat jeho animaci odděleně od prolínání kořene. Toto je základní koncept, který umožňuje populární efekt „morfování“ nebo „sdíleného prvku“.

Důležitá poznámka: V jakémkoli okamžiku během přechodu musí být view-transition-name unikátní. Nemůžete mít dva viditelné prvky se stejným jménem současně.

Hloubkové stylování: Základní pseudo-elementy

S pojmenovanými prvky se nyní můžeme ponořit do stylování konkrétních pseudo-elementů, které pro ně prohlížeč generuje. Zde můžete vytvářet skutečně vlastní a expresivní animace.

`::view-transition-group(name)`: Pohybovač

Jedinou odpovědností skupiny je přechod z velikosti a pozice starého prvku na velikost a pozici nového prvku. Neobsahuje skutečný vzhled obsahu, pouze jeho ohraničující rámeček. Představte si to jako pohyblivý rám.

Ve výchozím nastavení prohlížeč animuje jeho vlastnosti transform a width/height. Můžete to přepsat a vytvořit různé efekty. Například byste mohli přidat oblouk do jeho pohybu animováním podél zakřivené dráhy, nebo ho nechat během cesty zvětšovat a zmenšovat.

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

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

}

V tomto příkladu aplikujeme specifickou funkci zrychlení pouze na pohyb obrázku produktu, což mu dodává dynamičtější a fyzikálnější pocit, aniž by to ovlivnilo výchozí prolínání zbytku stránky.

`::view-transition-image-pair(name)`: Ořezávač a stmívač

Vnořený v pohybující se skupině, image-pair drží starý a nový pohled. Funguje jako ořezová maska, takže pokud má váš prvek border-radius, image-pair zajistí, že obsah zůstane oříznutý tímto poloměrem po celou dobu animace velikosti a pozice. Jeho dalším hlavním úkolem je řídit výchozí prolínání mezi starým a novým obsahem.

Můžete chtít tento prvek stylovat, abyste zajistili vizuální konzistenci nebo vytvořili pokročilejší efekty. Klíčovou vlastností, kterou je třeba zvážit, je isolation: isolate. To je zásadní, pokud plánujete používat pokročilé efekty mix-blend-mode na potomcích (starém a novém), protože to vytváří nový kontext vrstvení a zabraňuje tomu, aby prolínání ovlivnilo prvky mimo přechodovou skupinu.

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

  isolation: isolate;

}

`::view-transition-old(name)` a `::view-transition-new(name)`: Hvězdy představení

Toto jsou pseudo-elementy, které představují vizuální vzhled vašeho prvku před a po změně DOM. Zde se bude odehrávat většina vaší vlastní animační práce. Ve výchozím nastavení na nich prohlížeč spouští jednoduchou prolínací animaci pomocí opacity a mix-blend-mode. Chcete-li vytvořit vlastní animaci, musíte nejprve vypnout tu výchozí.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Jakmile je výchozí animace zakázána, můžete aplikovat svou vlastní. Pojďme prozkoumat několik běžných vzorů.

Vlastní animace: Posun (Slide)

Místo prolínání nechme obsah kontejneru vklouznout. Například při navigaci mezi články chceme, aby text nového článku vklouzl zprava, zatímco starý text vyklouzne doleva.

Nejprve definujte klíčové snímky (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%); }

}

Nyní aplikujte tyto animace на starý a nový pseudo-element pro pojmenovaný prvek '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;

}

Vlastní animace: 3D otočení (Flip)

Pro dramatičtější efekt můžete vytvořit 3D otočení karty. To vyžaduje animaci vlastnosti transform s rotateY a také správu backface-visibility.

/* Skupina potřebuje 3D kontext */

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

  transform-style: preserve-3d;

}

/* Image-pair také musí zachovat 3D kontext */

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

  transform-style: preserve-3d;

}

/* Starý pohled se otáčí z 0 na -180 stupňů */

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

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

  backface-visibility: hidden;

}

/* Nový pohled se otáčí ze 180 na 0 stupňů */

::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); }

}

Praktické příklady a pokročilé techniky

Teorie je užitečná, ale teprve v praxi se opravdu učíme. Pojďme si projít několik běžných scénářů a jak je řešit pomocí pseudo-elementů view transition.

Příklad: „Morfující“ náhled karty

Toto je klasický přechod sdíleného prvku. Představte si galerii uživatelských profilů. Každý profil je karta s avatarem. Když kliknete na kartu, přejdete na stránku s detaily, kde je tentýž avatar zobrazen prominentně nahoře.

Krok 1: Přiřazení jmen

Na vaší stránce galerie dostane obrázek avatara jméno. Jméno by mělo být unikátní pro každou kartu, například na základě ID uživatele.

/* V gallery-item.css */

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

Na stránce s detailem profilu dostane velký avatar v záhlaví přesně stejné jméno.

/* V profile-page.css */

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

Krok 2: Přizpůsobení animace

Ve výchozím nastavení prohlížeč avatar přesune a změní jeho velikost, ale také provede prolínání obsahu. Pokud je obrázek identický, je toto prolínání zbytečné a může způsobit mírné probliknutí. Můžeme ho zakázat.

/* Hvězdička (*) zde funguje jako zástupný znak pro jakoukoli pojmenovanou skupinu */

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

  /* Vypnutí výchozího prolínání */

  animation-duration: 0s;

}

Počkat, když vypneme prolínání, jak se obsah přepne? U sdílených prvků, kde jsou starý a nový pohled identické, je prohlížeč dostatečně chytrý na to, aby použil pouze jeden pohled pro celý přechod. `image-pair` v podstatě drží pouze jeden obrázek, takže vypnutí prolínání jednoduše odhalí tuto optimalizaci. U prvků, kde se obsah skutečně mění, byste potřebovali vlastní animaci namísto výchozího prolínání.

Zpracování změn poměru stran

Běžný problém nastává, když přecházející prvek mění svůj poměr stran. Například náhled krajiny 16:9 na stránce se seznamem se může přeměnit na čtvercový avatar 1:1 na stránce s detaily. Výchozí chování prohlížeče je animovat šířku a výšku nezávisle, což má za následek, že obrázek vypadá během přechodu zmáčknutý nebo natažený.

Řešení je elegantní. Necháme ::view-transition-group, aby se postaral o změnu velikosti a pozice, ale přepíšeme stylování starého a nového obrázku uvnitř něj.

Cílem je, aby staré a nové „snímky obrazovky“ vyplnily svůj kontejner bez deformace. Toho můžeme dosáhnout nastavením jejich šířky a výšky na 100 % a umožněním, aby se o správné škálování postarala výchozí vlastnost prohlížeče object-fit (která je zděděna z původního prvku).

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

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

  /* Zabraňte deformaci vyplněním kontejneru */

  width: 100%;

  height: 100%;

  

  /* Přepište výchozí prolínání, abyste efekt jasně viděli */

  animation: none;

}

S tímto CSS bude `image-pair` plynule animovat svůj poměr stran a obrázky uvnitř budou správně oříznuty nebo doplněny černými pruhy (v závislosti на jejich hodnotě `object-fit`), stejně jako by byly v normálním kontejneru. Poté můžete přidat své vlastní animace, jako je prolínání, nad tuto opravenou geometrii.

Ladění a podpora v prohlížečích

Stylování prvků, které existují jen zlomek sekundy, může být ošidné. Naštěstí moderní prohlížeče pro to poskytují vynikající vývojářské nástroje. V Chrome nebo Edge DevTools můžete přejít na panel „Animations“, a když spustíte view transition, můžete ho pozastavit. S pozastavenou animací pak můžete použít panel „Elements“ k prozkoumání celého stromu pseudo-elementů `::view-transition` stejně jako jakékoli jiné části DOM. Můžete vidět aplikované styly a dokonce je v reálném čase upravovat, abyste své animace zdokonalili.

Ke konci roku 2023 je View Transitions API podporováno v prohlížečích založených na Chromiu (Chrome, Edge, Opera). Implementace probíhají pro Firefox a Safari. To z něj činí ideálního kandidáta na progresivní vylepšení. Uživatelé s podporovanými prohlížeči získají úžasný, vylepšený zážitek, zatímco uživatelé na jiných prohlížečích získají standardní, okamžitou navigaci. Podporu můžete zkontrolovat v CSS:

@supports (view-transition: none) {

  /* Všechny styly view-transition patří sem */

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

}

Osvědčené postupy pro globální publikum

Při implementaci animací je životně důležité brát v úvahu rozmanitou škálu uživatelů a zařízení po celém světě.

Výkon: Animace by měly být rychlé a plynulé. Držte se animování CSS vlastností, jejichž zpracování je pro prohlížeč levné, především transform a opacity. Animování vlastností jako width, height nebo margin může na každém snímku spouštět přepočítávání layoutu, což vede k zasekávání a špatnému zážitku, zejména na méně výkonných zařízeních.

Přístupnost: Někteří uživatelé zažívají kinetózu nebo nepohodlí z animací. Všechny hlavní operační systémy poskytují uživatelskou předvolbu pro omezení pohybu. Musíme to respektovat. Media query prefers-reduced-motion vám umožňuje zakázat nebo zjednodušit animace pro tyto uživatele.

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

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Přeskočte všechny vlastní animace a použijte rychlé, jednoduché prolínání */

    animation: none !important;

  }

}

Uživatelský zážitek (UX): Dobré přechody jsou účelné. Měly by vést pozornost uživatele a poskytovat kontext o změně, která se děje v UI. Animace, která je příliš pomalá, může způsobit, že se aplikace bude zdát pomalá, zatímco příliš okázalá může být rušivá. Cílem je doba trvání přechodu mezi 200 ms a 500 ms. Cílem je, aby animace byla více cítit, než vidět.

Závěr: Budoucnost je plynulá

CSS View Transitions API, a konkrétně jeho mocný strom pseudo-elementů, představuje monumentální skok vpřed pro webová uživatelská rozhraní. Poskytuje vývojářům nativní, výkonnou a vysoce přizpůsobitelnou sadu nástrojů pro vytváření plynulých, stavových přechodů, které kdysi byly výhradní doménou nativních aplikací. Porozuměním rolím ::view-transition, ::view-transition-group a párů old/new obrazů se můžete posunout za jednoduchá prolínání a choreografovat složité, smysluplné animace, které zlepšují použitelnost a těší uživatele.

Jak se bude podpora prohlížečů rozšiřovat, stane se toto API nezbytnou součástí sady nástrojů moderního front-end vývojáře. Přijetím jeho schopností a dodržováním osvědčených postupů pro výkon a přístupnost můžeme budovat web, který je nejen funkčnější, ale také krásnější a intuitivnější pro všechny a všude.