code voor jouw (zip)
Een transitie van een webpagina naar een andere webpagina.
Alleen CSS - geen jS nodig.
Cross-document VT’s aanzetten
Dat doe je met:
@view-transition {
navigation: auto;
}
nb. Dat is voor oefening 1 al gedaan in zowel index.css als andere.css
De duration voor root langer maken (in zowel index.css als andere.css)
Dat doe je in de selector: ::view-transition-group(root) { }
DE H1 een view-transition-naam geven (in zowel index.css als andere.css)
Dat doe je met: view-transition-name (gebruik de naam howdy)
De duration voor de h1 langer maken (in zowel index.css als andere.css)
Dat doe je in de selector: ::view-transition-group(howdy) { }
Een custom animation maken voor root (eerst in andere.css)
Zorg dat de wipe-out animatie eindigt met translate:-100% (links uit beeld schuiven)
Koppel de animatie aan de oude view.
Dat doe je in de selector: ::view-transition-old(root) { }
Gebruik een stuiterende ease voor animation-timing-function
Bron: open props easing
Zorg dat de wipe-in animatie start met translate:100% (vanaf rechts in beeld schuiven)
Koppel de animatie aan de oude view.
Dat doe je in de selector: ::view-transition-new(root) { }
Gebruik een stuiterende ease voor animation-timing-function
Een custom animation maken voor root (eerst in index.css)
Zorg dat de wipe-out animatie eindigt met translate:100% (rechts uit beeld schuiven)
Koppel de animatie aan de oude view.
Dat doe je in de selector: ::view-transition-old(root) { }
Gebruik een stuiterende ease voor animation-timing-function
Zorg dat de wipe-in animatie start met translate:-100% (vanaf links in beeld schuiven)
Koppel de animatie aan de oude view.
Dat doe je in de selector: ::view-transition-new(root) { }
Gebruik een stuiterende ease voor animation-timing-function
Houdt rekening met prefers-reduced-motion
Omring de @view-transition boven in de css documenten met een media querie.
Cross-document VT’s aanzetten (in zowel index.css als details.css)
Dat doe je met:
@view-transition {
navigation: auto;
}
nb. Houdt gelijk rekening met prefers-reduced-motion
De duration voor root langer maken (in zowel index.css als details.css)
Dat doe je in de selector: ::view-transition-group(root) { }
De wolf soepel heen en weer terug laten bewegen
Daarvoor moet je volgende doen in index.css:
view-transition-name gevenview-transition-name gevenview-transition-group van de h2 een duration gevenview-transition-group van de img een duration gevenEn het volgende doen in details.css:
view-transition-name gevenview-transition-name gevenview-transition-groupvan de h1 een duration gevenview-transition-group van de img een duration gevenNu de wolf en het biggetje
Daarvoor zou je hetzelfde als bij stap 3 nog een keer kunnen doen voor het biggetje. Maar dat wordt dan wel heel veel code als je het voor alle sprookjesfiguren wilt doen. Begin met de code die je voor de wolf geschreven hebt uit te commenten.
Je gaat daarvoor custom properties gebruiken. Die zijn al opgenomen index.html, wolf.html en big.html. Je vind daar bij de headings en images steeds een custom property: --vt.
In index.css het volgende doen:
view-transition-name geven (gebruik daarvoor var(--vt))view-transition-name geven (gebruik daarvoor var(--vt))view-transition-class geven (gebruik daarvoor title). De class kun je gebruiken om een animatie voor alle h2’s tegelijk te definieren (dan hoeft dat niet los voor elk karakter)view-transition-class geven (gebruik daarvoor image).view-transition-group van de h2’s een duration geven (gebruik de view-transition-class)view-transition-group van de img’s een duration geven (gebruik de view-transition-class)En het volgende doen in details.css:
view-transition-name geven (gebruik daarvoor var(--vt))view-transition-name geven (gebruik daarvoor var(--vt))view-transition-class geven (gebruik daarvoor title). De class kun je gebruiken om een animatie voor alle h2’s tegelijk te definieren (dan hoeft dat niet los voor elk karakter)view-transition-class geven (gebruik daarvoor image).view-transition-group van de h1 een duration geven (gebruik de view-transition-class)view-transition-group van de img een duration geven (gebruik de view-transition-class)Hatsiekiedee, klaar.
Een transitie op een webpagina zelf.
Nog steeds veel CSS, maar ook JS.
Geef de img een view-transition-name (raket)
Een view transitie starten met JS
De raket en debutton zijn al voor je opgezocht. Er is al een eventlistener. Een ook een callback function waarin je de view transitie gaat starten. In de functie vind je ook al een if else statement om te checken of de browser view transities ondersteunt.
In het if deel ga je de view transitie starten. Op het blog piccalilli vind je een artikel van ene Cyd Stumpel hou je een view transitie kunt starten
In het else deel kun je een alert() tonen dat de browser geen view transities ondersteunt.
De duration voor raket langer maken, met ::view-transition-group(raket) { }
Maak de animatie wat interessanter met een cubic-bezier() animation-timing-function
Lea Verou heeft een goede cubic-bezier() generator gemaakt.
nb. Het husselen werkt al. Je gaat dat er alleen wel leuker uit laten zien met view transities.
Geef de li’s een view-transition-name.
view-transition-name moeten uniek zijn. Dat zou heel veel werk betekenen om dat voor alle li’s te doen. Daar is een oplossing voor bedacht. Je kunt match-element als view-transition-name gebruiken. Dan zorgt de browser er achter de schermen magisch voor dat elke li een unieke naam krijgt.
Geef de li’s een view-transition-class (item). Die class kun je zo gebruiken om in één keer een animatie te definiëren voor alle li’s tegelijk.
Een view transitie starten met JS. Spiek even bij sommetje 3 hoe je dat doet.
De duration voor de li’s langer maken, met ::view-transition-group. Gebruik daarvoor de class die je bij stap 1 hebt aangemaakt.
De button disablen als de li’s aan het husselen zijn.
Roep in de functie disableButton aan bij het starten van de view transitie.
Stijl de button als die disabled is. De secletoren daarvoor staan al in de CSS.
Als de view transitie klaar is roep je de functie enableButton aan.
Op MDN staat een artikel [hoe je iets doet als de view transitie klaar is] (https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/finished).
nb. Het toevoegen en verwijderen van filters werkt al. Je gaat dat er alleen wel leuker uit laten zien met view transities.
Geef de de buttons in de div een view-transition-name en view-transition-class.
Start een view transitie in de callback functie addFilter() die wordt aangeroepen als op de + wordt geklikt.
Start een view transitie in de callback functie removeFilter() die wordt aangeroepen als op een button in de div wordt geklikt.
De duration voor de buttons langer (.33s) maken, met ::view-transition-group. Gebruik daarvoor de class die je bij stap 1 hebt aangemaakt.
Geef de buttons ook een hele korte delay (.075s).
Nu nog een mooie fadeIn en fadeOut animatie toevoegen voor de buttons.
Met de selector ::view-transition-new(.filter):only-child kun je de button die wordt toegevoegd selecteren. Die heeft namelijk alleen een nieuwe state (want hij bestond nog niet in de oude state).
Maak de animatie --is-coming af zodat de button van 0% naar 100% schaalt.
Koppel de animatie aan de ::view-transition-new(.filter):only-child selector met een duration van .33s en een delay van 0s.
nb. Cyd heeft wederom een goed artikel geschreven waarin ze in meer detail uitlegt hoe je verschijnende en verdwijnende elementen kunt selecterent.
Met de selector ::view-transition-old(.filter):only-child kun je de button die wordt verwijderd selecteren. Die heeft namelijk alleen een oude state (want hij bestaat niet meer in de nieuwe state).
Maak de animatie --is-going af zodat de button van 100% naar 0% schaalt.
Koppel de animatie aan de ::view-transition-new(.filter):only-child selector met een duration van .33s en een delay van 0s.
Als je snel op de + button wilt kunnen klikken moet je nog wat doen. De view transities animeren in de top-layer (de laag boven alle z-indexen) en dekken de button tijdens het animeren af.
Bramus van Damme heeft een artikel geschreven hoe je door de view transities heen kunt klikken.
🎯 ⸺ text (chrome)
🎯 ⸺ Some practical examples of view transitions to elevate your UI (piccalilli)
🎯 ⸺ View Transition API (MDN)