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:
- Przeglądarka wykonuje zrzuty starego i nowego stanu.
- DOM jest aktualizowany podczas pomijania renderowania.
- 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 z dokumentacją.
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 żadnego 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.
Włącz u góry strony, 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.