CSS skata pāreju apgūšana: Padziļināts ieskats pseidoelementu stilošanā

Pastāvīgi mainīgajā tīmekļa izstrādes ainavā nemitīgi tiek meklēta nevainojama, plūstoša un saistoša lietotāja pieredze. Gadiem ilgi izstrādātāji ir centušies mazināt plaisu starp tīmekli un vietējām lietotnēm, īpaši attiecībā uz lapu pāreju gludumu. Tradicionālā tīmekļa navigācija bieži vien izraisa krasu, pilnas lapas pārlādi — tukšu baltu ekrānu, kas uz brīdi pārtrauc lietotāja iegremdēšanos. Vienas lapas lietotnes (SPA) to ir mazinājušas, taču pielāgotu, jēgpilnu pāreju izveide ir palikusi sarežģīts un bieži vien trausls uzdevums, kas lielā mērā ir atkarīgs no JavaScript bibliotēkām un sarežģītas stāvokļa pārvaldības.

Ienāk CSS skata pāreju API (CSS View Transitions API) — revolucionāra tehnoloģija, kas ir gatava mainīt veidu, kā mēs apstrādājam lietotāja saskarnes izmaiņas tīmeklī. Šis jaudīgais API nodrošina vienkāršu, bet neticami elastīgu mehānismu animācijai starp dažādiem DOM stāvokļiem, padarot vieglāku nekā jebkad agrāk izveidot noslīpētu, lietotnei līdzīgu pieredzi, ko lietotāji ir sākuši sagaidīt. Šī API pamatā ir jaunu CSS pseidoelementu kopa. Tie nav jūsu tipiskie selektori; tie ir dinamiski, pagaidu elementi, ko ģenerē pārlūkprogramma, lai sniegtu jums detalizētu kontroli pār katru pārejas fāzi. Šis ceļvedis jūs vedīs padziļinātā ceļojumā pa šo pseidoelementu koku, pētot, kā stilot katru komponentu, lai izveidotu satriecošas, veiktspējīgas un pieejamas animācijas globālai auditorijai.

Skata pārejas anatomija

Pirms mēs varam stilot pāreju, mums ir jāsaprot, kas notiek "zem pārsega", kad tā tiek aktivizēta. Kad jūs iniciējat skata pāreju (piemēram, izsaucot document.startViewTransition()), pārlūkprogramma veic virkni darbību:

• Vecā stāvokļa tveršana: Pārlūkprogramma uzņem "ekrānuzņēmumu" no lapas pašreizējā stāvokļa.
• DOM atjaunināšana: Jūsu kods veic izmaiņas DOM (piem., navigē uz jaunu skatu, pievieno vai noņem elementus).
• Jaunā stāvokļa tveršana: Kad DOM atjaunināšana ir pabeigta, pārlūkprogramma uzņem ekrānuzņēmumu no jaunā stāvokļa.
• Pseidoelementu koka izveide: Pārlūkprogramma konstruē pagaidu pseidoelementu koku lapas pārklājumā. Šis koks satur tvertos attēlus no vecā un jaunā stāvokļa.
• Animācija: CSS animācijas tiek piemērotas šiem pseidoelementiem, radot gludu pāreju no vecā stāvokļa uz jauno. Noklusējums ir vienkārša krusteniskā sapludināšana (cross-fade).
• Tīrīšana: Kad animācijas ir pabeigtas, pseidoelementu koks tiek noņemts, un lietotājs var mijiedarboties ar jauno, dzīvo DOM.

Pielāgošanas atslēga ir šis pagaidu pseidoelementu koks. Iedomājieties to kā slāņu kopu dizaina rīkā, kas īslaicīgi novietota virs jūsu lapas. Jums ir pilnīga CSS kontrole pār šiem slāņiem. Šeit ir struktūra, ar kuru jūs strādāsit:

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

Aplūkosim sīkāk, ko katrs no šiem pseidoelementiem pārstāv.

Pseidoelementu sastāvs

::view-transition: Šis ir visas struktūras saknes elements. Tas ir viens elements, kas aizpilda skatlogu un atrodas virs visa pārējā lapas satura. Tas darbojas kā konteiners visām pārejas grupām un ir lieliska vieta, kur iestatīt vispārīgas pārejas īpašības, piemēram, ilgumu vai laika funkciju.

::view-transition-group(*): Katram atsevišķam pārejas elementam (identificētam ar CSS īpašību view-transition-name) tiek izveidota grupa. Šis pseidoelements ir atbildīgs par tā satura pozīcijas un izmēra animēšanu. Ja jums ir kartīte, kas pārvietojas no vienas ekrāna puses uz otru, tad tas ir ::view-transition-group, kas faktiski kustas.

::view-transition-image-pair(*): Iegults grupā, šis elements darbojas kā konteiners un apgriešanas maska vecajam un jaunajam skatam. Tā galvenais uzdevums ir saglabāt tādus efektus kā border-radius vai transform animācijas laikā un pārvaldīt noklusējuma krusteniskās sapludināšanas animāciju.

::view-transition-old(*): Šis pārstāv elementa "ekrānuzņēmumu" jeb renderēto skatu tā vecajā stāvoklī (pirms DOM izmaiņām). Pēc noklusējuma tas animējas no opacity: 1 uz opacity: 0.

::view-transition-new(*): Šis pārstāv elementa "ekrānuzņēmumu" jeb renderēto skatu tā jaunajā stāvoklī (pēc DOM izmaiņām). Pēc noklusējuma tas animējas no opacity: 0 uz opacity: 1.

Sakne: ::view-transition pseidoelementa stilošana

::view-transition pseidoelements ir audekls, uz kura tiek gleznota visa jūsu animācija. Kā augstākā līmeņa konteiners, tā ir ideāla vieta, kur definēt īpašības, kurām jāattiecas globāli uz pāreju. Pēc noklusējuma pārlūkprogramma nodrošina animāciju kopu, bet jūs varat tās viegli pārrakstīt.

Piemēram, noklusējuma pāreja ir krusteniskā sapludināšana, kas ilgst 250 milisekundes. Ja vēlaties to mainīt visām pārejām savā vietnē, varat mērķēt uz saknes pseidoelementu:

::view-transition {

  animation-duration: 500ms;

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

}

Šis vienkāršais noteikums tagad liek visām noklusējuma lapu sapludināšanām ilgt divreiz ilgāk un izmantot 'ease-in-out' līkni, piešķirot tām nedaudz atšķirīgu sajūtu. Lai gan šeit varat lietot sarežģītas animācijas, parasti to vislabāk izmantot universāla laika un plūduma definēšanai, ļaujot specifiskākiem pseidoelementiem veikt detalizētu horeogrāfiju.

Grupēšana un nosaukšana: `view-transition-name` spēks

Bez papildu darba, skata pāreju API nodrošina visas lapas krustenisko sapludināšanu. To pārvalda viena pseidoelementu grupa saknei. Patiesais API spēks atklājas, kad vēlaties pārejas veikt konkrētiem, atsevišķiem elementiem starp stāvokļiem. Piemēram, panākt, ka produkta sīktēls saraksta lapā nemanāmi izaug un pārvietojas uz galvenā produkta attēla pozīciju detalizētas informācijas lapā.

Lai pārlūkprogrammai pateiktu, ka divi elementi dažādos DOM stāvokļos ir konceptuāli vienādi, jūs izmantojat view-transition-name CSS īpašību. Šī īpašība jāpiemēro gan sākuma, gan beigu elementam.

/* Saraksta lapas CSS */

.product-thumbnail {

  view-transition-name: product-image;

}

/* Detalizētās informācijas lapas CSS */

.main-product-image {

  view-transition-name: product-image;

}

Piešķirot abiem elementiem vienu un to pašu unikālo nosaukumu (šajā gadījumā 'product-image'), jūs instruējat pārlūkprogrammu: "Tā vietā, lai vienkārši izdzēstu veco lapu un iedzēstu jauno, izveido īpašu pāreju šim konkrētajam elementam." Pārlūkprogramma tagad ģenerēs īpašu ::view-transition-group(product-image), lai pārvaldītu tā animāciju atsevišķi no saknes sapludināšanas. Šis ir fundamentālais koncepts, kas nodrošina populāro "morfēšanās" jeb "koplietojamā elementa" pārejas efektu.

Svarīga piezīme: Jebkurā pārejas brīdī view-transition-name nosaukumam jābūt unikālam. Jums nevar būt divi redzami elementi ar vienādu nosaukumu vienlaicīgi.

Padziļināta stilošana: Galvenie pseidoelementi

Kad mūsu elementi ir nosaukti, mēs varam iedziļināties konkrētu pseidoelementu stilošanā, ko pārlūkprogramma tiem ģenerē. Šeit jūs varat izveidot patiesi pielāgotas un izteiksmīgas animācijas.

`::view-transition-group(name)`: Pārvietotājs

Grupas vienīgā atbildība ir pāriet no vecā elementa izmēra un pozīcijas uz jaunā elementa izmēru un pozīciju. Tā nesatur paša satura izskatu, tikai tā ierobežojošo kasti. Iedomājieties to kā kustīgu rāmi.

Pēc noklusējuma pārlūkprogramma animē tās transform un width/height īpašības. Jūs varat to pārrakstīt, lai radītu dažādus efektus. Piemēram, jūs varētu pievienot loku tās kustībai, animējot to pa izliektu ceļu, vai likt tai palielināties un samazināties tās ceļojuma laikā.

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

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

}

Šajā piemērā mēs piemērojam specifisku plūduma funkciju tikai produkta attēla kustībai, padarot to dinamiskāku un fiziskāku, neietekmējot pārējās lapas noklusējuma sapludināšanu.

`::view-transition-image-pair(name)`: Apgriezējs un sapludinātājs

Iegults kustīgajā grupā, attēlu pāris satur veco un jauno skatu. Tas darbojas kā apgriešanas maska, tādēļ, ja jūsu elementam ir border-radius, attēlu pāris nodrošina, ka saturs paliek apgriezts ar šo rādiusu visā izmēra un pozīcijas animācijā. Tā otrs galvenais uzdevums ir organizēt noklusējuma krustenisko sapludināšanu starp veco un jauno saturu.

Jūs varētu vēlēties stilot šo elementu, lai nodrošinātu vizuālo konsekvenci vai radītu sarežģītākus efektus. Galvenā īpašība, kas jāapsver, ir isolation: isolate. Tas ir būtiski, ja plānojat izmantot sarežģītus mix-blend-mode efektus bērnelementiem (vecajam un jaunajam), jo tas rada jaunu kārtošanas kontekstu un novērš sajaukšanās ietekmi uz elementiem ārpus pārejas grupas.

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

  isolation: isolate;

}

`::view-transition-old(name)` un `::view-transition-new(name)`: Šova zvaigznes

Šie ir pseidoelementi, kas pārstāv jūsu elementa vizuālo izskatu pirms un pēc DOM izmaiņām. Šeit notiks lielākā daļa jūsu pielāgoto animāciju darba. Pēc noklusējuma pārlūkprogramma tiem veic vienkāršu krusteniskās sapludināšanas animāciju, izmantojot opacity un mix-blend-mode. Lai izveidotu pielāgotu animāciju, vispirms ir jāizslēdz noklusējuma animācija.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Kad noklusējuma animācija ir atspējota, jūs varat brīvi piemērot savu. Izpētīsim dažus izplatītus modeļus.

Pielāgota animācija: Slaids

Krusteniskās sapludināšanas vietā, liksim konteinera saturam ieslīdēt. Piemēram, navigējot starp rakstiem, mēs vēlamies, lai jaunā raksta teksts ieslīdētu no labās puses, kamēr vecais teksts izslīd pa kreisi.

Vispirms definējiet atslēgkadrus:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

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

}

Tagad piemērojiet šīs animācijas vecajam un jaunajam pseidoelementam nosauktajam elementam '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;

}

Pielāgota animācija: 3D apgriešana

Lai radītu dramatiskāku efektu, varat izveidot 3D kartītes apgriešanu. Tas prasa animēt transform īpašību ar rotateY un arī pārvaldīt backface-visibility.

/* Grupai nepieciešams 3D konteksts */

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

  transform-style: preserve-3d;

}

/* Arī attēlu pārim jāsaglabā 3D konteksts */

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

  transform-style: preserve-3d;

}

/* Vecais skats apgriežas no 0 līdz -180 grādiem */

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

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

  backface-visibility: hidden;

}

/* Jaunais skats apgriežas no 180 līdz 0 grādiem */

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

}

Praktiski piemēri un progresīvas tehnikas

Teorija ir noderīga, bet praktiskā pielietošana ir tas, kur mēs patiesi mācāmies. Apskatīsim dažus izplatītus scenārijus un to, kā tos atrisināt ar skata pārejas pseidoelementiem.

Piemērs: "Morfējošais" kartītes sīktēls

Šī ir klasiskā koplietojamā elementa pāreja. Iedomājieties lietotāju profilu galeriju. Katrs profils ir kartīte ar avatāru. Noklikšķinot uz kartītes, jūs nonākat detalizētas informācijas lapā, kur tas pats avatārs tiek redzami attēlots augšpusē.

1. solis: Piešķiriet nosaukumus

Jūsu galerijas lapā avatāra attēlam tiek piešķirts nosaukums. Nosaukumam jābūt unikālam katrai kartītei, piemēram, balstoties uz lietotāja ID.

/* galerijas-elementa.css */

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

Profila detalizētās informācijas lapā lielajam galvenes avatāram tiek piešķirts tieši tāds pats nosaukums.

/* profila-lapas.css */

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

2. solis: Pielāgojiet animāciju

Pēc noklusējuma pārlūkprogramma pārvietos un mērogos avatāru, bet tā arī veiks satura krustenisko sapludināšanu. Ja attēls ir identisks, šī sapludināšana ir nevajadzīga un var izraisīt nelielu mirgošanu. Mēs varam to atspējot.

/* Zvaigznīte (*) šeit ir aizstājējzīme jebkurai nosauktai grupai */

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

  /* Atspējot noklusējuma sapludināšanu */

  animation-duration: 0s;

}

Pagaidiet, ja mēs atspējojam sapludināšanu, kā saturs pārslēdzas? Koplietojamiem elementiem, kur vecais un jaunais skats ir identiski, pārlūkprogramma ir pietiekami gudra, lai izmantotu tikai vienu skatu visai pārejai. `image-pair` būtībā satur tikai vienu attēlu, tāpēc sapludināšanas atspējošana vienkārši atklāj šo optimizāciju. Elementiem, kuru saturs faktiski mainās, jums būtu nepieciešama pielāgota animācija noklusējuma sapludināšanas vietā.

Malu attiecību izmaiņu apstrāde

Bieži sastopams izaicinājums rodas, kad pārejas elements maina savu malu attiecību. Piemēram, 16:9 ainavas sīktēls saraksta lapā var pāriet uz 1:1 kvadrātveida avatāru detalizētās informācijas lapā. Pārlūkprogrammas noklusējuma uzvedība ir animēt platumu un augstumu neatkarīgi, kas noved pie tā, ka attēls pārejas laikā izskatās saspiests vai izstiepts.

Risinājums ir elegants. Mēs ļaujam ::view-transition-group pārvaldīt izmēra un pozīcijas maiņu, bet mēs pārrakstām veco un jauno attēlu stilus tā iekšienē.

Mērķis ir panākt, lai vecais un jaunais "ekrānuzņēmums" aizpildītu savu konteineru, neizkropļojoties. To mēs varam izdarīt, iestatot to platumu un augstumu uz 100% un ļaujot pārlūkprogrammas noklusējuma object-fit īpašībai (kas tiek mantota no sākotnējā elementa) pareizi apstrādāt mērogošanu.

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

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

  /* Novērš izkropļojumus, aizpildot konteineru */

  width: 100%;

  height: 100%;

  

  /* Pārrakstīt noklusējuma krustenisko sapludināšanu, lai skaidri redzētu efektu */

  animation: none;

}

Ar šo CSS, `image-pair` gludi animēs savu malu attiecību, un attēli iekšpusē tiks pareizi apgriezti vai parādīti ar melnām joslām (atkarībā no to `object-fit` vērtības), tieši tāpat kā tie būtu parastā konteinerā. Pēc tam jūs varat pievienot savas pielāgotās animācijas, piemēram, krustenisko sapludināšanu, virs šīs koriģētās ģeometrijas.

Atkļūdošana un pārlūkprogrammu atbalsts

Elementu stilošana, kas pastāv tikai sekundes daļu, var būt sarežģīta. Par laimi, modernas pārlūkprogrammas piedāvā lieliskus izstrādātāju rīkus šim nolūkam. Chrome vai Edge DevTools varat doties uz paneli "Animations" un, kad aktivizējat skata pāreju, varat to apturēt. Kad animācija ir apturēta, jūs varat izmantot paneli "Elements", lai pārbaudītu visu `::view-transition` pseidoelementu koku tāpat kā jebkuru citu DOM daļu. Jūs varat redzēt piemērotos stilus un pat modificēt tos reāllaikā, lai pilnveidotu savas animācijas.

Sākot ar 2023. gada beigām, skata pāreju API tiek atbalstīts Chromium bāzes pārlūkprogrammās (Chrome, Edge, Opera). Implementācijas tiek veiktas Firefox un Safari. Tas padara to par perfektu kandidātu progresīvai uzlabošanai. Lietotāji ar atbalstītām pārlūkprogrammām iegūst apburošu, uzlabotu pieredzi, kamēr lietotāji citās pārlūkprogrammās saņem standarta, tūlītēju navigāciju. Jūs varat pārbaudīt atbalstu CSS:

@supports (view-transition: none) {

  /* Šeit tiek ievietoti visi skata pāreju stili */

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

}

Labākā prakse globālai auditorijai

Ieviešot animācijas, ir svarīgi ņemt vērā daudzveidīgo lietotāju un ierīču klāstu visā pasaulē.

Veiktspēja: Animācijām jābūt ātrām un plūstošām. Pieturieties pie CSS īpašību animēšanas, kuru apstrāde pārlūkprogrammai ir lēta, galvenokārt transform un opacity. Tādu īpašību kā width, height vai margin animēšana var izraisīt izkārtojuma pārrēķinus katrā kadrā, radot raustīšanos un sliktu pieredzi, īpaši mazjaudīgākās ierīcēs.

Pieejamība: Daži lietotāji izjūt nelabumu vai diskomfortu no animācijām. Visas lielākās operētājsistēmas nodrošina lietotāja preferenci samazināt kustību. Mums tas ir jāciena. Mediju vaicājums prefers-reduced-motion ļauj jums atspējot vai vienkāršot animācijas šiem lietotājiem.

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

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Izlaist visas pielāgotās animācijas un izmantot ātru, vienkāršu sapludināšanu */

    animation: none !important;

  }

}

Lietotāja pieredze (UX): Labas pārejas ir mērķtiecīgas. Tām jāvirza lietotāja uzmanība un jāsniedz konteksts par izmaiņām, kas notiek lietotāja saskarnē. Pārāk lēna animācija var padarīt lietotni lēnīgu, savukārt pārāk uzkrītoša var novērst uzmanību. Mērķējiet uz pārejas ilgumu no 200ms līdz 500ms. Mērķis ir, lai animāciju vairāk sajustu, nekā redzētu.

Noslēgums: Nākotne ir plūstoša

CSS skata pāreju API, un īpaši tās jaudīgais pseidoelementu koks, ir milzīgs solis uz priekšu tīmekļa lietotāja saskarnēm. Tas nodrošina izstrādātājiem vietēju, veiktspējīgu un ļoti pielāgojamu rīku komplektu, lai radītu tādas plūstošas, stāvokli saglabājošas pārejas, kas kādreiz bija tikai vietējo lietotņu ekskluzīva privilēģija. Izprotot ::view-transition, ::view-transition-group un old/new attēlu pāru lomas, jūs varat pārsniegt vienkāršas sapludināšanas un horeografēt sarežģītas, jēgpilnas animācijas, kas uzlabo lietojamību un iepriecina lietotājus.

Paplašinoties pārlūkprogrammu atbalstam, šis API kļūs par būtisku daļu no moderna front-end izstrādātāja rīku komplekta. Pieņemot tā iespējas un ievērojot labāko praksi veiktspējai un pieejamībai, mēs varam veidot tīmekli, kas ir ne tikai funkcionālāks, bet arī skaistāks un intuitīvāks ikvienam un visur.