Šis įvadas, skirtas peržiūrėti Astro perėjimus, yra išimtis Astro galios išlaisvinimasdabar pasiekiama „SitePoint Premium“.
The Peržiūrėti Transitions API siūlo patogų būdą generuoti animuotus perėjimus tarp įvairių DOM būsenų, tuo pačiu atnaujinant DOM turinį viena operacija. Tradiciškai tai pasiekti buvo sunku žiniatinklyje, tačiau naudojant šią naują API, perėjimus galima atlikti gana paprastai. Studijos parodė, kad naudojant „View Transitions“ API greičiau suvokiamas svetainės našumas.
„Astro“ palaiko peržiūros perėjimą iš dėžutės su integruotu atsarginiu mechanizmu naršyklėms, kurios šiuo metu nepalaiko API.
Paruoštas sprendimas palaiko integruotas animacijas, animacijas naršymui pirmyn ir atgal bei automatinį pasiekiamumo palaikymą (per prefers-reduced-motion), be daugelio kitų dalykų.
Vienas iš geriausių būdų parodyti peržiūros perėjimus yra naudoti vaizdo elementą, kuris išlaikys savo būseną tarp puslapio perėjimų. (Atminkite, kad taip pat galime išlaikyti būseną tarp komponentų, kurie naudoja client:* direktyvas taip pat.) To pavyzdys parodytas toliau esančiame vaizdo įraše.
Tarkime, kad turime a <Video /> komponentas su šiuo turiniu:
---
// src/components/Video
const src="https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4";
const {
autoplay = false,
controls = true,
loop = false
} = Astro.props;
---
<video {controls} {autoplay} {loop} transition:persist>
<source {src} />
</video>
Aukščiau pateiktame kode paimame vaizdo įrašą iš „Cloudinary“. Be to, leidžiame automatiškai paleisti vaizdo įrašą ir paleisti ciklą (pradėti iš naujo), kai jis baigiasi, o naudotojui suteikiame valdymo mygtukus. Šiuos nustatymus nustato šiam vaizdo įrašo komponentui siunčiamos ypatybės, o jei šios savybės nepateikiamos, naudojamos numatytosios vertės. Tada šie kintamieji pridedami prie HTML <video> ir <source> elementai.
Prašome atkreipti dėmesį į transition:persist direktyva. Taikydami šią direktyvą išlaikysime vaizdo įrašų grotuvo būseną tarp perėjimų: einant į kitą puslapį vaizdo įrašas bus leidžiamas, o kitose puslapio dalyse bus rodomas atnaujintas turinys. Šį komponentą galime naudoti tiek index.astro ir about.astro puslapiai:
// src/pages/index.astro
---
import Video from '../components/Video.astro';
---
<!-- some other HTML -->
<Video />
Galiausiai turime įjungti puslapio perėjimus, kuriuos galime atlikti kiekviename puslapyje arba visame projekte visame pasaulyje. Darant prielaidą, kad turime tam tikrą maketo failą, galime lengvai jį įjungti importuodami ViewTransitions iš astro:transitions:
// src/layouts/Layout.astro
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
<title>My site!</title>
<ViewTransitions />
</head>
<body>
<slot />
</body>
</html>
Apibendrinant galima pasakyti, kad eksperimentinė „View Transitions“ API supaprastina vaizdinius perėjimus tarp įvairių puslapių ar elementų naudojant CSS pseudoelementus, „JavaScript“ ir ankstesnių bei dabartinių DOM būsenų momentines nuotraukas. Tai suteikia naują galimybę pagerinti matomą puslapio našumą, sumažinant priklausomybę nuo sudėtingų tinkintų JavaScript ir CSS.
Norite sužinoti daugiau apie „Astro“ – modernią „viskas viename“ sistemą, skirtą greitesnėms, į turinį orientuotoms svetainėms kurti? Patikrinkite Astro galios išlaisvinimasdabar pasiekiama „SitePoint Premium“.
