This is a library for declarative use of View Transition API with Angular
npm install @ng-web-apis/view-transition
!npm bundle size

This service is an abstraction over
view transition API for Angular
``bash`
npm i @ng-web-apis/view-transition
1. Import the WaViewTransitionService into your Angular component or service where you want to use it.
`ts`
import {WaViewTransitionService} from '@ng-web-apis/view-transition';
2. Inject the WaViewTransitionService into your component's constructor or with inject (Angular 14+).
`ts
// in constructor
constructor(private viewTransitionService: WaViewTransitionService) {}
// via inject
viewTransitionService = inject(WaViewTransitionService);
`
3. Use the startViewTransition method to initiate a view transition. This method takes a callback function thatPromise
returns a or void. You can perform any necessary DOM changing logic within this callback.
`ts``
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);
},
});
}
You can try online demo here
Other Web APIs for Angular by
@ng-web-apis