document.startViewTransition în JavaScript

document.startViewTransition(() => actualizeazaPagina())

Ce face document.startViewTransition

Browserul face o „poză” a paginii, rulează funcția ta care modifică DOM-ul, apoi animă trecerea între cele două stări (implicit cu o estompare). Elementele cu aceeași proprietate CSS view-transition-name în ambele stări sunt animate separat, ca și cum s-ar muta.

Metoda returnează un obiect ViewTransition cu promisiunile ready și finished. În browserele fără suport, verifică întâi existența metodei și rulează doar funcția.

Parametri

Parametru	Descriere
functie	Funcția care modifică pagina (poate fi asincronă).

Ce returnează

Un obiect ViewTransition.

Exemple

Exemplul 1: Schimbarea temei cu tranziție

async function schimbaTema() {
  if (!document.startViewTransition) {
    document.body.classList.toggle("intunecat");
    return;
  }
  const tranzitie = document.startViewTransition(() => document.body.classList.toggle("intunecat"));
  await tranzitie.finished;
  console.log("tranziție terminată");
}

schimbaTema();

Rezultat în browser

tranziție terminată

Greșeli frecvente

• Apelezi metoda fără verificare și pagina dă TypeError în browserele vechi. Verifică if (document.startViewTransition).

Comenzi înrudite

• Element.animate: Animă un element direct din JavaScript (Web Animations API), fără clase CSS.
• classList: Adaugă, scoate sau comută clase CSS pe un element.
• history.pushState / replaceState: Schimbă adresa din bara browserului fără reîncărcarea paginii; baza aplicațiilor cu o singură pagină.