Bekyk Transitions API: Inheemse bladsy-animasies

Opgedateer 8 Oktober 2026.

Die View Transitions API laat 'n blaaier tussen visuele toestande animeer. Gebruik dit om 'n verandering van konteks makliker te maak om te volg: maak 'n item oop, beweeg tussen verwante bladsye of opdatering van 'n aansig. Hou die onderliggende navigasie en inhoud bruikbaar wanneer geen oorgang loop nie.

Oorgange van dieselfde dokument en kruisdokument

Vir 'n verandering binne een dokument, kan die blaaier die ou toestand vaslê, jou opdatering laat loop en in die nuwe toestand animeer. Vir navigasie tussen dokumente kan oorgange tussen dokumente ondersteunde bladsye van dieselfde oorsprong verbind. Die implementering verskil; volg die blaaierplatform gids vir dieselfde dokument en kruisdokumentgids.

Behandel verenigbaarheid as iets om in jou ondersteunde blaaiers te toets. Moenie 'n oorgangs-API verantwoordelik maak vir die haal van inhoud, om te besluit of 'n skakel werk, of die hantering van 'n mislukte vormindiening nie.

'n Veilige patroon van dieselfde dokument

Hou die DOM-opdatering in 'n funksie wat op sy eie werk. Kenmerkbespeuring en die bewegingsvoorkeur besluit of dit in 'n oorgang moet toegedraai word:

function updateView(updateDOM) {
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!document.startViewTransition || reduced) {
    updateDOM();
    return;
  }
  return document.startViewTransition(updateDOM);
}

Hierdie helper neem 'n sinchrone DOM-opdatering aan. Vir asynchrone data, hanteer laai en mislukking eksplisiet en dateer slegs op wanneer die toestand wat jy van plan is om te wys gereed is. Behou fokus op 'n betekenisvolle element nadat interaktiewe inhoud vervang is.

Begin klein op 'n multi-bladsy webwerf

Op versoenbare bladsye van dieselfde oorsprong is 'n basiese kruisdokument-intekening:

@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

Die gewone skakel behoort steeds suksesvol sonder hierdie CSS te navigeer. Begin met 'n kort worteloorgang voordat individuele elemente oor bladsye verbind word. Gee gedeelde elemente opsetlike name en maak seker dat daar geen duplikaat aktiewe name binne 'n dokument is nie.

Kies beweging wat die interaksie verduidelik

'n Ingehoue vervaag is dikwels genoeg. 'n Gedeelde produkprent kan nuttig wees wanneer dit 'n lysinskrywing duidelik aan die detailbladsy koppel. Vermy om onverwante opskrifte te animeer of om die hele uitsig oor 'n lang afstand te skuif bloot omdat die kenmerk dit toelaat.

Hou belangrike kontroles reageer tydens die oorgang. Toets lang titels, laat laai prente, lettertipe veranderinge en inhoud wat grootte verander tussen state. 'n Oorgang moet nie 'n uitlegprobleem verberg of 'n andersins vinnige bladsy stadig laat voel nie.

Toeganklikheid- en navigasiekontroles

• Verifieer die resultaat met verminderde beweging geaktiveer.
• Toets sleutelbordfokus voor en na die verandering.
• Hou semantiese opskrifte, landmerke en skakelbestemmings ongeskonde.
• Gaan blaaier Terug en Vorentoe navigasie na.
• Toets stadige antwoorde en mislukte inhoudversoeke.
• Toets 'n blaaier waar die verbetering nie beskikbaar is nie.

Vir 'n groter animasiestelsel, koördineer eienaarskap noukeurig. Twee enjins behoort nie dieselfde element se transformasie of ondeursigtigheid op dieselfde tyd te beheer nie. Bladsy-oorgange en rol-effekte moet elk 'n duidelike lewensiklus en skoonmaakprosedure hê.

Algemene vrae

Vervang dit 'n blaai-animasiebiblioteek?

Nee. Aansig-oorgange verbind visuele toestande. 'n Scroll-animasiestelsel koppel effekte aan blaai. Gebruik óf slegs waar die gedrag daarvan die bladsy help.

Sal 'n nie-ondersteunde blaaier 'n stukkende bladsy wys?

Dit behoort normale navigasie of die normale DOM-opdatering te wys. Kenmerkopsporing en 'n werkende basislyn is noodsaaklik vir daardie resultaat.

Moet elke bladsy 'n uitgebreide oorgang gebruik?

Nee. Kies 'n konsekwente, beskeie effek, voeg dan gedeelde-element-oorgange by net waar dit 'n besoeker help verstaan ​​waarheen hulle beweeg het.

Verken ons frontend-ontwikkelingsdienste of bespreek 'n toeganklike bewegingstelsel.