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ść między widokami w tym samym dokumencie wiele się zmieniło.

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

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 wersji podstawowej

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 tym samym dokumencie 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 wprowadzenie obsługi, 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 nadawanie nazw elementom za pomocą view-transition-name: match-element

Aby oznaczyć element, który ma być częścią zrzutu w ramach przejścia 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 wielu elementów, które nie zmieniają się w znaczący sposób. Jeśli masz 100 elementów, które przesuwają 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 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 tej 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 migawki. Migawki 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 pseudoselektory, które używają funkcji 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 masz czas na sprawdzenie pseudoelementów 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

Podczas przejścia widoku renderuje zrzuty elementó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 płaskie drzewo wystarcza, ale staje się problematyczne, gdy używane są efekty wizualne, takie jak przycinanie lub 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 pseudoelementy ::view-transition-group. Gdy grupy przejść widoku są zagnieżdżone, można przywrócić efekty, takie jak przycinanie, podczas przejścia.

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 pseudoklasie ::view-transition-group(…), zawarte w niej 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(…) a ::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ć wizualnie podobny 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 zwalniania miejsca 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 w określonym 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 korzenie przejścia). Zdarzenia wskaźnika są blokowane tylko w tym poddrzewie (co można ponownie włączyć), a nie w całym dokumencie. Dodatkowo umożliwiają one rysowanie elementów poza korzeniem przejścia na wierzchu przejścia widoku w 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, co pozwoli Ci zobaczyć, jak się od siebie różnią.

Funkcja jest gotowa do testowania w Chrome 140 z włączoną flagą „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 pseudoklasę ::view-transition jest i tak blokiem zawierającym migawkę. Jedynym zauważalnym efektem jest inna wartość position podczas wykonywania działania getComputedStyle.

document.activeViewTransition 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ść między widokami w tym samym dokumencie wartość jest ustawiana po wywołaniu document.startViewTransition. W przypadku przejść między widokami w różnych dokumentach możesz uzyskać dostęp do 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ę, element ViewTransition osiągnie stan finished dopiero wtedy, gdy przekazana obietnica zostanie spełniona.

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 r. nie próżnowaliśmy. W przyszłości planujemy wprowadzić przejścia widoku zakresu 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 przejść widoku można zgłaszać w grupie roboczej CSS. Jeśli napotkasz błąd, zgłoś go w Chromium.