Wat is er nieuw in weergaveovergangen? (Google I/O 2024-update)

Bramus

Gepubliceerd: 16 mei 2024

Op Google I/O 2024 kondigde ik de volgende stap voor weergave-overgangen aan: weergave-overgangen tussen documenten voor applicaties met meerdere pagina's (MPA).

Bovendien heb ik een aantal verbeteringen met u gedeeld waarmee u in het algemeen eenvoudiger met weergaveovergangen kunt werken.

• Delen van animatiestijlen tussen pseudo-elementen van weergaveovergangen met view-transition-class .
• Selectieve weergave-overgangen met actieve typen.

Deze verbeteringen gelden zowel voor overgangen in dezelfde documentweergave voor toepassingen met één pagina (SPA) als voor overgangen in meerdere documentweergaven voor MPA.

Overgangen tussen documentweergaven voor MPA's

In Chrome 111 heeft het Chrome-team overgangen in dezelfde documentweergave toegevoegd voor toepassingen met één pagina , een functie die goed is ontvangen door de webbouwerscommunity.

Het is geweldig om te zien wat velen van jullie met weergaveovergangen hebben gebouwd. Van de typische implementaties die "de miniatuur laten uitgroeien tot de grote foto" tot zeer gepersonaliseerde, meeslepende ervaringen zoals deze van Airbnb. Fantastisch!

De initiële implementatie vereiste echter dat u een SPA moest bouwen om weergaveovergangen te kunnen gebruiken. Vanaf Chrome 126 is dit niet langer het geval; weergaveovergangen zijn nu standaard ingeschakeld voor navigatie met dezelfde oorsprong. U kunt nu een weergaveovergang maken tussen twee verschillende documenten met dezelfde oorsprong.

Om overgangen tussen documenten mogelijk te maken, moeten beide partijen toestemming geven. Gebruik hiervoor de at-regel @view-transition en stel de navigation in op auto .

@view-transition {
  navigation: auto;
}

Overgangen tussen documenten gebruiken dezelfde bouwstenen en principes als overgangen tussen documenten. Elementen met een view-transition-name worden vastgelegd en u kunt de animaties aanpassen met CSS-animaties.

Met de gebeurtenissen pageswap en pagereveal krijgt u toegang tot het weergaveovergangsobject en kunt u overgangen tussen documenten aanpassen.

• Met pageswap kunt u nog enkele last-minute wijzigingen aanbrengen op de uitgaande pagina, vlak voordat de oude snapshots worden gemaakt.
• Met pagereveal kunt u de nieuwe pagina aanpassen voordat deze wordt weergegeven nadat deze is geïnitialiseerd.

In beide gevallen hebt u toegang tot een NavigationActivation object om een ​​overgang in de weergave van een document aan te passen op basis van de oude en nieuwe bestemmingsgeschiedenisvermeldingen of het navigatietype .

Bovendien kunt u wachten tot de content is geladen met renderblokkering en vervolgens vertrouwen op pre-rendering om de laadtijd te verbeteren voordat de weergaveovergang wordt uitgevoerd.

Demonstratie

Deze Stack Navigator-demo combineert al deze functies (samen met enkele verbeteringen ).

Dit is een MPA met navigatie tussen documenten, gehost op dezelfde bron. Door gebruik te maken van pagereveal wordt het type animatie bepaald op basis van de oude en nieuwe bestemmingsgeschiedenis.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Lees de documentatie

Raadpleeg onze documentatie over overgangen tussen documentweergaven voor meer informatie over het activeren en aanpassen van overgangen tussen documentweergaven .

Verbeteringen in weergaveovergangen

Naast het leveren van weergaveovergangen tussen documenten voor MPA, bevat Chrome ook een aantal verbeteringen voor het werken met weergaveovergangen in het algemeen.

Deze verbeteringen gelden zowel voor overgangen in dezelfde documentweergave voor SPA als voor overgangen in meerdere documentweergaven voor MPA.

Animatiestijlen delen met view-transition-class

Tot nu toe moest u, wanneer u meerdere snapshots op dezelfde manier animeerde, elke snapshot afzonderlijk selecteren door de pseudo-selector te herhalen voor elk element met een unieke view-transition-name .

Met view-transition-class kun je nu een gedeelde naam toevoegen aan alle snapshots. Gebruik deze gedeelde naam in de pseudo-selectors om alle snapshots te selecteren die overeenkomen. Dit resulteert in veel eenvoudigere selectors, die automatisch schalen van één naar meerdere elementen.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

In het volgende kaartvoorbeeld wordt view-transition-class gebruikt om dezelfde animatietiming toe te passen op meerdere snapshots met behulp van één selector.

Voor meer informatie over view-transition-class kunt u de speciale documentatie over view-transition-class lezen .

Selectieve weergave-overgangen met actieve typen

Een andere verfijning van weergaveovergangen is de introductie van het toevoegen van typen aan een weergaveovergang tijdens het vastleggen en uitvoeren ervan. Dit maakt het gemakkelijker om met verschillende weergaveovergangen op dezelfde pagina te werken, zonder dat de declaraties van de ene weergaveovergang de andere wijzigen.

Wanneer u bijvoorbeeld naar de volgende of de vorige pagina in een paginavolgorde gaat, wilt u mogelijk verschillende animaties gebruiken, afhankelijk van of u naar een hogere of lagere pagina in de reeks gaat.

Vóór actieve typen kon je klassen aan de DOM toevoegen en in je CSS op die klassen reageren. Je moest echter ook opruimen nadat de overgangen waren voltooid.

Met weergaveovergangstypen kunt u hetzelfde resultaat bereiken, met als bijkomend voordeel dat deze typen automatisch worden opgeschoond zodra de weergaveovergang is voltooid. Typen worden alleen toegepast bij het vastleggen of uitvoeren van de overgang.

Voor overgangen tussen weergaven van hetzelfde document geeft u de types door aan de startViewTransition -methode, die nu een object accepteert. update is de callbackfunctie die de DOM bijwerkt en types is een reeks tekenreeksen.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

Voor een overgang tussen documentweergaven stelt u de typen in de at-rule @view-transition met behulp van de types . U kunt ze ook on-the-fly instellen in de gebeurtenissen pageswap en pagereveal .

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Zodra de typen zijn ingesteld, kunt u in uw CSS op deze typen reageren met behulp van de pseudo-klasseselectoren :active-view-transition-type() en :active-view-transition die van toepassing zijn op de root van de weergaveovergang.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

Voor meer informatie over weergaveovergangen raadpleegt u de speciale documentatie voor weergaveovergangen binnen hetzelfde document en weergaveovergangen tussen verschillende documenten .

Feedback

Feedback van ontwikkelaars wordt altijd gewaardeerd. Om dit te doen, kunt u een probleem indienen bij de CSS Working Group op GitHub met suggesties en vragen. Voeg vóór uw probleem het voorvoegsel [css-view-transitions] toe.

Mocht u een bug tegenkomen, meld dit dan als Chromium-bug .