When using the transitions API in a vue project for example:
document.startViewTransition(() => {
router.push({name: 'Index'})
});
This works correctly and every page transitions with a fade effect.
However, I have used a CSS reset like so:
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
all: unset;
display: revert;
}
The all: unset
causes the view transitions to only work on elements where I specify a name, meaning the default fade no longer works.
So my question is, how do I reinstate the default view transition properties?
I have tried various combinations of the new CSS syntax like so:
*::view-transition-old(),
*::view-transition-new() {
animation-duration: 0.5s;
}
But nothing has worked so far.
You could exclude the view transition from your reset.
*:where(:not(iframe, canvas, img, svg, video, ::view-transition):not(svg *, symbol *)) {
all: unset;
display: revert;
}