66
View transitions
View transitions
lesson note
view-transition-name geven aan het element die je graag los wilt animeren. Die naam kan je zelf verzinnen, je kan dus de name geven aan 2 elementen op aparte pagina's om ze naar elkaar toe te animeren
::view-transition-group(root) zowel voor oude als de nieuwe pagina
::view-transition-old(root) voor de oude pagina
::view-transition-new(root) voor de nieuwe pagina
De old en new kunnen handig zijn voor als je de hele pagina wilt animeren van links naar rechts, boven onder etc.
(root) als je de hele pagina wilt, je eigen verzonnen naam als je alleen dat element wilt animeren
prefers reduced motion hoeft alleen op:
@view-transition {
navigation: auto;
}
view-transition-name: math-element
var inline styling --vt:image-big
view-transition-name: var(--vt);
view-transition-class: title
view-transition-group(.title) selecteert alle titles met de view transition class title.
lesson note