disable user agent view-transition root conditionally

Is there a way to disable the standard user agent view transition manually before updating the dom? I know I can do:

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation: 0s;
}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
    animation: 0s;
}

But I am asking because when I explicitly not want to use my view transition (as in not setting the view-transition-name dynamically on the elements) the standard root transition just does its thing and there's no way for me to stop that unless I remove it entirely. That is of course annoying because I'd have to change quite a few other things on my project where I'd want to use it without thinking about it. I am using Angular if that information is necessary although it shouldn't(?). Hope someone can help me with this problem. I am most likely just not seeing the obvious solution here.

3 Replies

Ijee•5mo ago

The first thing I tried was to set an empty view-transition with a duration of 0 to the elements so that the root transition wouldn't trigger but somehow it still does.

::view-transition-group(disableTransition),
::view-transition-old(disableTransition),
::view-transition-new(disableTransition) {
    animation: 0s !important;
    mix-blend-mode: normal;
}

::view-transition-group(disableTransition),
::view-transition-old(disableTransition),
::view-transition-new(disableTransition) {
    animation: 0s !important;
    mix-blend-mode: normal;
}

Ijee•5mo ago

Even on my working view-transition the root transition always gets triggered which is also something I didn't understand.

Ijee•5mo ago

this is most certainly not the best solution but I just now add this class

.no-root-view-transition {
    view-transition-name: none !important;
    transition: none !important;
}

.no-root-view-transition {
    view-transition-name: none !important;
    transition: none !important;
}

to the document.documentElement before my view-transition and remove it after. that way it doesn't interfere although I still do not know why it would do that in the first place.

Gaming

Programming

disable user agent view-transition root conditionally