CODEWITHSUNDEEP
cssangularanimationcss-transitionsview-transitions-api
Stimmler
Stimmler

Reputation: 462

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

Upvotes: 5

Views: 775

Answers (1)

Stimmler
Stimmler

Reputation: 462

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

Update for Angular:

I've created an npm package to simplify the use of the View Transitions API in Angular.

https://github.com/DerStimmler/ngx-easy-view-transitions

All you have to do is add a noTransition directive to the element you want to disable view transitions for.

import { NoTransitionDirective } from 'ngx-easy-view-transitions';

<img noTransition src="...">

Upvotes: 4

Related Questions