cssview-transitions-api

View transitions api does not fade when using all: unset


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.


Solution

  • 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;
    }