4.11.1 • Published 10 months ago

@ng-web-apis/view-transition v4.11.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

ng-web-apis logo View Transition API for Angular

npm version npm bundle size codecov

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';
  1. Inject the ViewTransitionService into your component's constructor or with inject (Angular 14+).
// in constructor
constructor(private viewTransitionService: ViewTransitionService) {}

// via inject
viewTransitionService = inject(ViewTransitionService);
  1. 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

4.11.0

10 months ago

4.11.1

10 months ago

4.9.0

10 months ago

4.8.0

10 months ago

4.6.5

10 months ago

4.7.0

10 months ago

4.10.1

10 months ago

4.10.2

10 months ago

4.10.0

10 months ago

4.6.4

10 months ago

4.6.3

10 months ago

4.6.2

10 months ago

4.6.1

10 months ago

4.6.0

11 months ago

4.5.1

11 months ago

4.5.0

11 months ago

4.3.0

11 months ago

4.1.3

1 year ago

4.1.0

1 year ago

4.0.1

1 year ago

4.0.0

1 year ago

4.2.1

12 months ago

4.1.2

1 year ago

4.2.0

1 year ago

4.1.1

1 year ago

3.1.4

2 years ago

3.1.3

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago