Chrome 147 umożliwia jednoczesne i zagnieżdżone przejścia widoku z przejściami widoku ograniczonymi do elementu

Bramus

Data publikacji: 27 marca 2026 r.

W Chrome 147 wprowadziliśmy przejścia widoku w zakresie elementu. Jest to funkcja, która umożliwia rozpoczęcie przejścia widoku w poddrzewie DOM przez wywołanie Element.startViewTransition().

Ta funkcja umożliwia jednoczesne uruchamianie wielu przejść widoku, zagnieżdżanie trwających przejść widoku i rozwiązywanie problemów z warstwami treści position: fixed przy zachowaniu interaktywności pozostałej części strony.

Co się zmieniło?

Od czasu, gdy ogłosiliśmy, że funkcja jest gotowa do testowania przez deweloperów w Chrome 140, współpracowaliśmy ze społecznością i grupą roboczą CSS, aby dopracować szczegóły, zwłaszcza dotyczące domyślnych zachowań:

  • Domyślnie korzenie zakresu uczestniczą w programie.
  • Przejścia widoku z określonym zakresem automatycznie zawierają zagnieżdżone pseudoelementy dzięki użyciu zagnieżdżonych grup przejść widoku.
  • Pseudoklasa ::view-transition-group-children() w przejściu widoku z zakresem automatycznie przycina zawartość, jeśli element główny zakresu przycina przepełnienie.
  • Przejścia widoku w zakresie elementu automatycznie stosują contain: layout i view-transition-scope: all do głównego elementu zakresu podczas przejścia.

Po tych aktualizacjach przejścia widoku w zakresie elementu będą dostępne w stabilnej wersji Chrome od wersji 147.

Przykłady

Tasowanie list

W tej wersji demonstracyjnej możesz przetasować elementy na każdej liście. Możesz też zamienić listy miejscami, klikając przycisk na środku.

Prezentacja na żywo

Nagranie demonstracyjne

Ponieważ używane są przejścia widoku w zakresie elementu, obie listy mogą jednocześnie uruchamiać przejścia widoku z tasowaniem. Możesz też rozpocząć przejście do widoku zewnętrznego, które zamienia pozycje list, gdy elementy listy są nadal reorganizowane.

Moja podróż do Patagonii

W demonstracji „Moja wycieczka po Patagonii” pokazano przejścia widoku w zakresie elementu. Ta wersja demonstracyjna została utworzona na podstawie filmu z kampanii „Web UX, re-imagined”.

Użyj menu, aby filtrować elementy siatki. Kliknij przycisk Dodaj przy każdym elemencie siatki, aby dodać go do listy wybranych elementów, która pojawia się na pasku bocznym.

Prezentacja na żywo

Aby obejrzeć pełną wersję demonstracyjną, otwórz „My Patagonia Trip” na osobnej karcie.

Nagranie demonstracyjne

W wersji demonstracyjnej przejścia widoku z zakresem elementu są używane w 3 miejscach:

  • Siatka elementów podczas filtrowania.
  • elementy siatki podczas dodawania ich do listy wybranych elementów.
  • Pasek boczny z listą wybranych elementów.

Przeczytaj przewodnik

Aby dowiedzieć się wszystkiego o przejściach widoku ograniczonych do elementu, przeczytaj ten przewodnik. Wyjaśnia, jak wdrożyć przejścia widoku w zakresie elementu, zawiera dodatkowe szczegóły i więcej wersji demonstracyjnych.

Przeczytaj przewodnik po przejściach widoku w zakresie elementu