Skip to content

Support view transition types #60285

@DmitryEfimenko

Description

@DmitryEfimenko

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

Add support for "forwards" and "backwards" view transition types for the view transition created for router navigation event.

Docs for view transition types

Relevant code: https://github.com/angular/angular/blob/main/packages/router/src/utils/view_transition.ts#L121-L128

There would need to be a way to identify whether this is a "forwards" or "backwards" navigation. Not sure if this information is already available today.

Proposed solution

const direction = 'forwards'; // TODO: get this variable figured out dynamically

const transition = document.startViewTransition({
  update: () => {
    resolveViewTransitionStarted();
    // We don't actually update dom within the transition callback. The resolving of the above
    // promise unblocks the Router navigation, which synchronously activates and deactivates
    // routes (the DOM update). This view transition waits for the next change detection to
    // complete (below), which includes the update phase of the routed components.
    return createRenderPromise(injector);
  },
  types: [direction]
});

Alternatives considered

None

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions