I have an Angular App version 17.3 and I recently enabled view transitions using the withViewTransitions()
function.
However, I am now facing a challenge in excluding a specific element from the default (root) view transitions. Is there a way to achieve this?
::view-transition-old(root),
::view-transition-new(root)
I have already attempted setting the view-transition-name
style property of the element to none
, disabled animations with animation: none;
, and set mix-blend-mode: normal;
. Despite these efforts, the element is still being animated.
Edit: I am currently using Google Chrome, so I believe the feature should be available.
Edit2:
As a workaround, I found that I can disable view transitions for an element by setting the view-transition-name
to disabled
and adding the following CSS:
::view-transition-group(disabled),
::view-transition-old(disabled),
::view-transition-new(disabled) {
animation-duration: 0s !important;
}