Gotowe do testów deweloperskich: przejścia w widoku ograniczonym

Bramus

Opublikowano: 10 września 2025 r.

Przejścia widoku w określonym zakresie to proponowane rozszerzenie interfejsu View Transition API, które umożliwia rozpoczęcie przejścia widoku w poddrzewie DOM. Funkcja jest gotowa do testowania w Chrome 140 z włączoną flagą „Eksperymentalne funkcje platformy internetowej” w chrome://flags. Aktywnie zbieramy opinie deweloperów.

Szybkie wprowadzenie

Aby rozpocząć przejście widoku w określonym zakresie, wywołaj funkcję element.startViewTransition() (zamiast document.startViewTransition()) na dowolnym elemencie HTMLElement z zastosowanym do niego elementem contain: layout.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Wynikiem jest przejście widoku ograniczone do poddrzewa wybranego elementu HTMLElement, a powstałe pseudodrzewo ::view-transition jest wstrzykiwane do tego elementu HTMLElement. Element HTMLElement działa jako kontener animacji przejścia.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

Przejścia w określonym zakresie umożliwiają jednoczesne uruchamianie wielu przejść widoku (o ile mają różne elementy główne przejścia). Zdarzenia wskaźnika są blokowane tylko w tym poddrzewie (możesz je ponownie włączyć), a nie w całym dokumencie. Umożliwiają też rysowanie elementów spoza katalogu głównego przejścia na wierzchu przejścia widoku o określonym zakresie.

Wszystko o przejściach widoku w określonym zakresie znajdziesz w wyjaśnieniu dotyczącym przejść widoku w określonym zakresie.

Prezentacja

W poniższym przykładzie możesz przesuwać kropkę w kontenerze, klikając jeden z przycisków. Możesz to zrobić za pomocą przejść widoku w zakresie dokumentu lub przejść widoku w zakresie elementu, aby zobaczyć, jak się różnią.

W przypadku przejść w formie obejrzenia w określonym zakresie kropka pozostaje przycięta przez element nadrzędny podczas przejścia. Ponadto kropka nie zasłania wyskakującego okienka, gdy jest wyświetlana.

Czekamy na Twoją opinię

Interesują nas opinie społeczności programistów stron internetowych na temat:

• Kształt interfejsu Scoped View Transitions API.
• Przykłady zastosowań, w których funkcja działała dobrze lub nie działała zgodnie z oczekiwaniami.
• Jak należy rozwiązywać pytania dotyczące zakresów samodzielnego uczestnictwa.

Podziel się swoją opinią, komentując problem nr 9890 w grupie roboczej CSS. Zanim prześlesz opinię, zapoznaj się ze znanymi problemami i ograniczeniami.

Jeśli napotkasz błąd, zgłoś go w Chromium.