cssangularanimationcss-transitionsview-transitions-api

How to exclude an element from view transitions?

I have an v17.3 Angular App and enabled view transitions using the withViewTransitions() function.

Now, how can I exclude one specific element from the default (root) view transitions?

::view-transition-old(root),
::view-transition-new(root)

I already tried to set the view-transition-name style property of that element to none as mentioned in the docs, disabled animations with animation: none; and set mix-blend-mode: normal;. But the element still gets animated.

Edit: I'm using Google Chrome so the feature should be available.

Edit2: As workaround I can disable view transitions for an element by setting the view-transition-name to disabled and providing this css:

::view-transition-group(disabled),
::view-transition-old(disabled),
::view-transition-new(disabled) {
    animation-duration: 0s !important;
}
Solution

  • It seems that the workaround shown in the question is a suitable solution to the problem.

    You can disable view transitions for an element by setting the view-transition-name to, say, disabled and providing this css:

    ::view-transition-group(disabled),
::view-transition-old(disabled),
::view-transition-new(disabled) {
    animation-duration: 0s !important;
}