view-transition-name și document.startViewTransition() în CSS

.poza-produs {
  view-transition-name: poza-produs;
}
::view-transition-group(poza-produs) {
  animation-duration: 0.4s;
}
/* JS: document.startViewTransition(() => actualizeazaPagina()); */

Ce face view-transition-name și document.startViewTransition()

La o tranziție de vizualizare (pornită din JavaScript cu document.startViewTransition() sau între pagini cu @view-transition), browserul face o captură a stării vechi, aplică schimbarea și animă diferența. Implicit tot ecranul se estompează ca un singur bloc (root).

Cu view-transition-name: nume scoți un element din blocul general: browserul îl caută în starea veche și în cea nouă după nume și îl mută și redimensionează lin între cele două poziții. Așa obții efecte în care miniatura unui produs „crește” în poza mare de pe pagina de detaliu.

Numele trebuie să fie unic pe pagină în momentul capturii. Pentru a da același stil de animație mai multor elemente, folosește view-transition-class și selectorul ::view-transition-group(*.clasa).

Valori uzuale

Valoare	Descriere
view-transition-name: nume	Identificatorul elementului în tranziție; none (implicit) îl lasă în blocul root.
::view-transition-group(nume)	Animă poziția și mărimea elementului; aici schimbi durata sau easing-ul.
::view-transition-old(nume) / -new(nume)	Captura veche și cea nouă a elementului.
view-transition-class	Clasă comună pentru mai multe elemente cu nume diferite.
document.startViewTransition(fn)	JavaScript: pornește tranziția și rulează fn care modifică DOM-ul.

Exemple

Exemplul 1: Schimbarea filtrului dintr-o listă de produse

Fiecare card are un nume unic, setat inline (style=”view-transition-name: produs-12″). La filtrare, cardurile rămase alunecă în noile poziții.

/* <li class="produs" style="view-transition-name: produs-12"> */
.produs {
  view-transition-class: card;
}

::view-transition-group(*.card) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

/* JavaScript:
   buton.onclick = () =>
     document.startViewTransition(() => aplicaFiltru("cafea"));
*/

Efect vizual în browser

După clic pe filtrul „Cafea”, produsele de ceai dispar estompat, iar „Cafea boabe 1 kg – 89 lei” și „Cafea măcinată – 32 lei” alunecă lin în primele poziții ale grilei.

Exemplul 2: Poza din listă care devine poza mare de pe pagina produsului

Pe ambele pagini (cu @view-transition activ) poza are același nume, deci browserul o mută și o mărește între poziții.

@view-transition {
  navigation: auto;
}

/* pe pagina listei, doar pe produsul ales */
.produs-ales img {
  view-transition-name: poza-produs;
}

/* pe pagina produsului */
.galerie img.principala {
  view-transition-name: poza-produs;
}

Efect vizual în browser

La clic pe „Ceainic fontă – 145 lei”, miniatura lui se mărește și se deplasează lin în colțul din stânga sus, unde este poza mare de pe pagina produsului; restul paginii se estompează.

Greșeli frecvente

• Același view-transition-name pe două elemente vizibile în același timp; tranziția este anulată (în consolă apare o eroare despre nume duplicat).
• Setarea numelui pe toate cardurile din listă și pe pagina de detaliu; pe pagina listei pune numele doar pe elementul pe care s-a dat clic.

Comenzi înrudite

• @view-transition (tranziții între pagini): Animă trecerea de la o pagină la alta a aceluiași site, fără JavaScript, cu o simplă regulă CSS pe ambele pagini.
• animation și @keyframes: Creează animații complexe și autonome pe baza unor cadre cheie (@keyframes), fără a necesita JavaScript.
• transform (translate, rotate, scale, skew): Modifică forma, poziția și unghiul unui element în spațiul 2D sau 3D, fără a deranja elementele vecine.