Nowości w przejściach widoku (aktualizacja z 2025 r.)

Bramus

Data publikacji: 8 października 2025 r.

Od czasu wprowadzenia w 2023 roku przejść widoku w tym samym dokumencie wiele się zmieniło.

W 2024 r. wprowadziliśmy przejścia między widokami w różnych dokumentach, dodaliśmy ulepszenia, takie jak view-transition-class i typy przejść między widokami, a także powitaliśmy Safari, która dodała obsługę przejść między widokami.

W tym poście znajdziesz omówienie zmian w przejściach widoku w 2025 roku.

Lepsza obsługa przeglądarek i platform

Przejścia widoku w tym samym dokumencie wkrótce staną się dostępne w ramach Baseline Newly available

Jednym z obszarów, na których skupia się Interop 2025, jest interfejs View Transition API, a w szczególności przejścia widoku w ramach tego samego dokumentu z użyciem document.startViewTransition(updateCallback), view-transition-class, automatycznego nadawania nazw za pomocą view-transition-name: match-element i selektora CSS :active-view-transition.

Firefox zamierza uwzględnić te funkcje w najbliższej wersji 144, która zostanie udostępniona 14 października 2025 r. Dzięki temu te funkcje będą dostępne w ramach Baseline Newly available.

Interfejs View Transition API jest teraz obsługiwany w React Core

W ciągu roku zespół Reacta pracował nad dodaniem przejść widoku do podstawowej wersji Reacta. W kwietniu ogłosilireact@experimental obsługę, a w tym tygodniu na konferencji React Conf przenieśli ją do react@canary, co oznacza, że projekt jest bliski ukończenia.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Więcej informacji znajdziesz w dokumentacji Reacta lub w tym wystąpieniu Aurory Scharff.<ViewTransition>

Ostatnio wprowadzone funkcje

Automatyczne nazywanie elementów za pomocą view-transition-name: match-element

Aby oznaczyć element, który ma być uwzględniony w przejściu widoku, dodaj do niego atrybut view-transition-name. Jest to kluczowe w przypadku przejść widoku, ponieważ odblokowuje funkcje takie jak przejścia między 2 różnymi elementami. Każdy element ma tę samą wartość view-transition-name po obu stronach przejścia, a przejścia widoku zajmują się resztą.

Jednak nadawanie unikalnych nazw elementom może być uciążliwe w przypadku przenoszenia wielu elementów, które w rzeczywistości się nie zmieniają. Jeśli masz 100 elementów, które poruszają się na liście, musisz wymyślić 100 unikalnych nazw.

Dzięki match-element nie musisz tego robić. Jeśli użyjesz tej wartości w przypadku parametru view-transition-name, przeglądarka wygeneruje wewnętrzny identyfikator view-transition-name dla każdego pasującego elementu na podstawie jego tożsamości.

W poniższej prezentacji zastosowano to podejście. Każda karta w wierszu otrzymuje automatycznie wygenerowany symbol view-transition-name.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

Karta, która wchodzi lub wychodzi, otrzymuje wyraźną nazwę. Ta nazwa jest używana w CSS do przypisywania określonych animacji do tego zrzutu. Zrzuty ekranu wszystkich innych kart są stylizowane za pomocą view-transition-class powiązanego z nimi.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

Narzędzia deweloperskie wyświetlają teraz reguły kierowania na pseudoklasy, które używają view-transition-class.

Aby debugować przejścia widoku, możesz użyć panelu Animacje w Narzędziach deweloperskich, aby wstrzymać wszystkie animacje. Dzięki temu możesz sprawdzić pseudoelementy bez obawy, że przejście widoku zostanie zakończone. Możesz nawet ręcznie przewijać osie czasu animacji, aby zobaczyć, jak przebiegają przejścia.

Wcześniej podczas sprawdzania jednego z pseudoelementów ::view-transition-* Narzędzia deweloperskie w Chrome nie wyświetlały reguł kierowanych na pseudoelementy za pomocą ich zestawu view-transition-class. Zmieniło się to w Chrome 139, w którym dodano tę funkcję.

Zagnieżdżone grupy przejść widoku są dostępne w Chrome 140

Gdy uruchomiona jest zmiana widoku, renderuje ona elementy zrobione w postaci zrzutów w drzewie pseudoelementów. Domyślnie wygenerowane drzewo jest „płaskie”. Oznacza to, że pierwotna hierarchia w DOM zostaje utracona, a wszystkie przechwycone grupy przejść widoku są elementami równorzędnymi w ramach jednego pseudoelementu ::view-transition.

W wielu przypadkach takie podejście wystarcza, ale staje się problematyczne, gdy używane są efekty wizualne, takie jak przycinanie czy przekształcenia 3D. Wymagają one pewnej hierarchii w drzewie.

Dzięki „Zagnieżdżonym grupom przejść widoku” możesz teraz zagnieżdżać w sobie ::view-transition-group pseudo-elementy. Gdy grupy przejścia widoku są zagnieżdżone, podczas przejścia można przywrócić efekty, takie jak przycinanie.

Dowiedz się, jak korzystać z grup przejść widoku

Pseudoelementy dziedziczą teraz więcej właściwości animacji

Gdy ustawisz jedną z właściwości animation-* na pseudoelemencie ::view-transition-group(…), zawarte w nim elementy ::view-transition-image-pair(…), ::view-transition-old(…) i ::view-transition-new(…) również dziedziczą tę właściwość. Jest to przydatne, ponieważ automatycznie synchronizuje przejście między ::view-transition-new(…) i ::view-transition-old(…) z ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Początkowo dziedziczenie było ograniczone do właściwości animation-duration i animation-fill-mode (a później także animation-delay), ale obecnie zostało rozszerzone na więcej długich form animacji.

Przeglądarki obsługujące przejścia widoku powinny teraz mieć w arkuszu stylów klienta użytkownika następujące ustawienia:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Pseudo-elementy dziedziczące więcej właściwości zostały wprowadzone w Chrome 140.

Wykonanie wywołania zwrotnego obietnicy finished nie czeka już na ramkę.

Gdy Chrome używał finished do wykonania wywołania zwrotnego, czekał na wygenerowanie klatki, zanim wykonał tę logikę. Może to spowodować migotanie na końcu animacji, gdy skrypt przenosi niektóre style, aby zachować podobny wizualnie stan.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Ta zmiana czasu naprawia sytuację, ponieważ kroki czyszczenia przejścia widoku są wykonywane asynchronicznie po zakończeniu cyklu życia. Dzięki temu ramka wizualna wygenerowana w rozdzielczości obiecanej finished zachowuje strukturę przejścia widoku, co pozwala uniknąć migotania.

Ta zmiana czasu została wprowadzona w Chrome 140.

Nadchodzące funkcje

Rok jeszcze się nie skończył, więc mamy jeszcze trochę czasu na wprowadzenie kolejnych funkcji.

Przejścia widoku o ograniczonym zakresie są gotowe do testowania w Chrome 140

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 przez wywołanie funkcji element.startViewTransition() (zamiast document.startViewTransition()) na dowolnym elemencie HTMLElement.

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.

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ą.

Funkcja jest gotowa do testowania w Chrome 140 z włączoną flagą „Experimental Web Platform features” (Eksperymentalne funkcje platformy internetowej) w chrome://flags. Aktywnie zbieramy opinie deweloperów.

Pozycja ::view-transition zmieni się z fixed na absolute w Chrome 142

Pseudonim ::view-transition jest obecnie pozycjonowany za pomocą position: fixed. Zgodnie z uchwałą grupy roboczej CSS zostanie to zmienione na position: absolute.

Ta position zmiana wartości z fixed na absolute, która pojawi się w Chrome 142, nie jest widoczna, ponieważ blok zawierający pseudoelement ::view-transition jest i tak blokiem zawierającym migawkę. Jedynym zauważalnym efektem jest inna wartość position podczas wykonywania getComputedStyle.

document.activeViewTransition pojawi się w Chrome 142

Po rozpoczęciu przejścia widoku tworzona jest instancja ViewTransition. Ten obiekt zawiera kilka obietnic i funkcji do śledzenia postępu przejścia, a także umożliwia manipulacje, takie jak pomijanie przejścia lub modyfikowanie jego typów.

Zamiast wymagać ręcznego śledzenia tej instancji, Chrome udostępnia teraz właściwość document.activeViewTransition, która reprezentuje ten obiekt. Jeśli nie trwa żadne przejście, wartość to null.

W przypadku przejść do widoku tego samego dokumentu wartość jest ustawiana po wywołaniu funkcji document.startViewTransition. W przypadku przejść między widokami w różnych dokumentach możesz uzyskać dostęp do tej instancji ViewTransition w zdarzeniach pageswap i pagereveal.

Obsługa document.activeViewTransition zostanie wprowadzona w Chrome 142.

Zapobieganie automatycznemu zakończeniu przejścia widoku za pomocą ViewTransition.waitUntil

Przejście widoku automatycznie osiąga stan finished, gdy wszystkie jego animacje zostaną zakończone. Aby zapobiec automatycznemu zakończeniu, wkrótce możesz użyć ViewTranistion.waitUntil. Jeśli przekazujesz obietnicę, stan ViewTransition zostanie osiągnięty tylko wtedy, gdy ta przekazana obietnica zostanie spełniona.finished

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Ta zmiana zostanie wprowadzona jeszcze w tym roku i umożliwi na przykład oczekiwanie na fetch lub łatwiejsze wdrożenie przejścia widoku opartego na przewijaniu.

Co dalej?

Jak widzisz, od czasu wprowadzenia przejść widoku w 2023 roku nie próżnowaliśmy. W przyszłości planujemy wprowadzić przejścia widoku o ograniczonym zakresie i jak zawsze jesteśmy otwarci na Wasze opinie.

Jeśli masz pytania dotyczące przejść widoku, skontaktuj się z nami w mediach społecznościowych. Prośby o dodanie funkcji dotyczących przejść w widoku można zgłaszać w grupie roboczej CSS. Jeśli napotkasz błąd, zgłoś go w Chromium.