taiga-family
View Transition API for Angular
This service is an abstraction over view transition API for Angular
Install
npm i @ng-web-apis/view-transitionHow to use
- Import the
ViewTransitionServiceinto your Angular component or service where you want to use it.
import {ViewTransitionService} from '@ng-web-apis/view-transition';- Inject the
ViewTransitionServiceinto your component's constructor or withinject(Angular 14+).
// in constructor
constructor(private viewTransitionService: ViewTransitionService) {}
// via inject
viewTransitionService = inject(ViewTransitionService);- Use the
startViewTransitionmethod to initiate a view transition. This method takes a callback function that returns aPromise<void>orvoid. 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