View Transition API for Angular

This service is an abstraction over view transition API for Angular

Install

npm i @ng-web-apis/view-transition

How to use

1. Import the ViewTransitionService into your Angular component or service where you want to use it.

import {ViewTransitionService} from '@ng-web-apis/view-transition';

2. Inject the ViewTransitionService into your component's constructor or with inject (Angular 14+).

// in constructor
constructor(private viewTransitionService: ViewTransitionService) {}

// via inject
viewTransitionService = inject(ViewTransitionService);

3. Use the startViewTransition method to initiate a view transition. This method takes a callback function that returns a Promise<void> or void. You can perform any necessary DOM changing logic within this callback.

startTransition() {
  this.viewTransitionService.startViewTransition(() => {
    // Your DOM changing logic goes here
    return this.animateTransition();
  }).subscribe({
    next: (transition) => {
      // Callback is done and transition is about to begin
      console.log('View transition is about to begin:', transition);
    },
    complete: () => {
      console.log('View transition completed');
    },
    error: (error) => {
      // Handle any errors that occur during the transition
      console.error('View transition error:', error);
    },
  });
}

Demo

You can try online demo here

See also

Other Web APIs for Angular by @ng-web-apis