Płynne przejścia dzięki interfejsowi View Transition API

Bramus

Interfejs View Migrate API umożliwia tworzenie płynnych wizualnych przejść między różnymi widokami w witrynie. Pozwala to zwiększyć atrakcyjność witryny dla użytkowników, którzy przeglądają Twoją witrynę, niezależnie od tego, czy jest to aplikacja wielostronicowa (MPA), czy jednostronicowa (SPA).

Typowe sytuacje, w których należy użyć przejść między widokami:

• Miniaturka na stronie z informacjami o produkcie, która na stronie z informacjami o produkcie zmienia się w pełnowymiarowe zdjęcie produktu.
• Stały pasek nawigacyjny, który pozostaje widoczny podczas przechodzenia z jednej strony na drugą.
• Siatka z elementami ruchomymi pozycjami w trakcie filtrowania.

Wdrażanie przejść z widokiem

Przejścia widoku nie są powiązane z konkretną architekturą ani platformą i mogą być aktywowane nie tylko w jednym dokumencie, ale także między 2 różnymi dokumentami.

Oba typy przejścia na widok opierają się na tych samych elementach składowych i zasadach:

1. Przeglądarka wykonuje zrzuty starego i nowego stanu.
2. DOM jest aktualizowany podczas pomijania renderowania.
3. Przejścia są generowane za pomocą technologii CSS Animations.

Jedyną różnicą między tymi typami jest sposób ich wywoływania.

Przejścia w widoku tego samego dokumentu

Przejście widoku pojedynczego dokumentu jest nazywane przejściem widoku tego samego dokumentu. Dzieje się tak zazwyczaj w przypadku aplikacji jednostronicowych (SPA). Przejścia między widokiem tego samego dokumentu są obsługiwane w Chrome od wersji Chrome 111.

Jak aktywować

Aktywuj przejścia między widokiem tego samego dokumentu, wywołując funkcję document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Przykład

Oto przykład kart to interfejs SPA, który korzysta z animacji w widoku tego samego dokumentu, aby animować karty w miarę dodawania lub usuwania nowych.

Zacznij tworzyć

Więcej informacji o przejściach między widokiem tego samego dokumentu znajdziesz na specjalnej stronie dokumentacji.

Tworzenie przejść między widokiem tego samego dokumentu

Przejścia widoku między dokumentami

Przejście między dwoma różnymi dokumentami jest nazywane przejściem widoku wielu dokumentów. To typowa wartość w przypadku MPA. Przejścia między dokumentami są obsługiwane w Chrome 126 i nowszych wersjach.

Jak aktywować

Przełączenia widoku między dokumentami są wywoływane przez nawigację między dokumentami z tej samej domeny, jeśli obie strony wyraziły na to zgodę. Oznacza to, że nie ma interfejsu API, który można by wywołać w celu rozpoczęcia przejścia w widoku różnych dokumentów. Gdy użytkownik kliknie link, kliknięcie spowoduje zmianę widoku.

Aby włączyć tę funkcję, użyj tego fragmentu kodu CSS:

@view-transition {
  navigation: auto;
}

Przykład

Poniższy przykładowy komponent z nawigatorem stosu to MPA, który wykorzystuje przejścia między dwoma różnymi dokumentami. W zależności od tego, czy przechodzisz do nawigacji głębiej, czy nie, strony są umieszczane na stosie lub wyskakują.

Zacznij tworzyć

Dowiedz się wszystkiego o przejściach między wyświetleniami różnych dokumentów.

Tworzenie przejść między dokumentami