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
Ijee2mo 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
Ijee2mo ago
Even on my working view-transition the root transition always gets triggered which is also something I didn't understand.
No description
Ijee
Ijee2mo 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.