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

Bramus

Gepubliceerd: 16 mei 2024

Op Google I/O 2024 heb ik de volgende stap voor weergaveovergangen aangekondigd: weergaveovergangen tussen documenten voor toepassingen met meerdere pagina's (MPA).

Bovendien heb ik enkele verbeteringen gedeeld waarmee u gemakkelijker met weergaveovergangen in het algemeen kunt werken.

• Animatiestijlen delen tussen pseudo-elementen voor weergaveovergangen met view-transition-class .
• Selectieve weergaveovergangen met actieve typen.

Deze verbeteringen zijn van toepassing op zowel weergaveovergangen van hetzelfde document voor toepassingen met één pagina (SPA) als weergaveovergangen tussen verschillende documenten voor MPA.

Weergaveovergangen tussen documenten voor MPA's

In Chrome 111 heeft het Chrome-team weergaveovergangen voor hetzelfde document geleverd voor applicaties met één pagina , een goed ontvangen functie binnen de webbouwgemeenschap.

Het is geweldig om te zien wat velen van jullie hebben gebouwd met weergaveovergangen. Variërend van de typische implementaties die "de miniatuur laten uitgroeien tot de grote foto" tot zeer op maat gemaakte meeslepende ervaringen zoals deze van Airbnb. Verbazingwekkend!

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

Om overgangen tussen documenten mogelijk te maken, moeten beide kanten zich aanmelden. Om dit te doen, gebruikt u de @view-transition at-regel en stelt u de navigation in op auto .

@view-transition {
  navigation: auto;
}

Overgangen tussen weergaven tussen documenten gebruiken dezelfde bouwstenen en principes als overgangen tussen weergaven binnen dezelfde documenten. Elementen waarop een view-transition-name is toegepast, worden vastgelegd en u kunt de animaties aanpassen met behulp van CSS-animaties.

Om weergaveovergangen tussen documenten aan te passen , gebruikt u de gebeurtenissen pageswap en pagereveal , die u toegang geven tot het weergaveovergangsobject.

• Met pageswap kunt u op het laatste moment nog enkele 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 gebeurtenissen hebt u toegang tot een NavigationActivation object om een ​​overgang tussen documentweergaven aan te passen op basis van de oude en nieuwe bestemmingsgeschiedenisitems, of het navigatietype .

Als klap op de vuurpijl kunt u wachten tot de inhoud is geladen met weergaveblokkering en vertrouwen op pre-rendering om de laadtijd te verbeteren voordat de weergaveovergang wordt uitgevoerd.

Demo

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

Dit is een MPA met navigatie tussen documenten, gehost op dezelfde oorsprong. Door pagereveal te gebruiken, wordt het type animatie bepaald op basis van de oude en nieuwe bestemmingsgeschiedenisgegevens.

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

Voor meer informatie over hoe u overgangen tussen weergaven tussen documenten activeert en aanpast, raadpleegt u onze documentatie over overgangen tussen weergaven tussen documenten .

Bekijk overgangsverbeteringen

Naast het leveren van weergave-overgangen tussen verschillende documenten voor MPA, bevat Chrome ook enkele verfijningen in het werken met weergave-overgangen in het algemeen.

Deze verbeteringen zijn van toepassing op zowel weergaveovergangen van hetzelfde document voor SPA als weergaveovergangen tussen verschillende documenten voor MPA.

Deel animatiestijlen met view-transition-class

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

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

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

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

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

Selectieve weergaveovergangen met actieve typen

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

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

Vóór actieve typen kon u klassen aan de DOM toevoegen en op die klassen reageren in uw CSS. U moet echter ook opruimen nadat de overgangen zijn voltooid.

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

Voor weergaveovergangen van hetzelfde document geeft u de types door aan de methode startViewTransition , die nu een object accepteert. update is de callback-functie die de DOM bijwerkt, en types is een reeks tekenreeksen.

const direction = determineBackwardsOrForwards();

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

Voor een weergaveovergang tussen meerdere documenten stelt u typen in de @view-transition at-regel in met behulp van de types of stelt u ze direct in in de gebeurtenissen pageswap en pagereveal .

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

Als de typen zijn ingesteld, kunt u in uw CSS op deze typen reageren met behulp van de :active-view-transition-type() en :active-view-transition pseudo-klasse selectors die van toepassing zijn op de view-overgangsroot.

/* 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 de typen weergaveovergangen raadpleegt u de speciale documentatie voor weergaveovergangen in hetzelfde document en weergaveovergangen tussen verschillende documenten .

Feedback

Feedback van ontwikkelaars wordt altijd op prijs gesteld. Om dit te doen, dient u een probleem in bij de CSS Working Group op GitHub met suggesties en vragen. Geef uw probleem een ​​voorvoegsel met [css-view-transitions] .

Mocht je een bug tegenkomen, dien dan een Chromium-bug in .