Starting with Angular 17.0.0-next.4, Angular provides a built-in support for the View Transitions API.
Update your route configuration by adding the withViewTransition()
provider:
import {withViewTransitions} from '@angular/router';
provideRouter(routes, withViewTransitions())
By default, the transitions will operate a quick fade-out/fade-in animation.
You can customize it by using the view transition pair ::view-transition-old
::view-transition-new
to generate animations on view transitions.
::view-transition-old(<selector>) {
// TODO animation definition for leaving page
}
::view-transition-new(<selector>) {
// TODO animation definition for new page
}
Use the new view-transition-name
css rule to identify pairs of elements for finer animations.
A given view-transition-name value cannot be used several times on the same page.
.my-element {
view-transition-name: myElement;
}
This project use a custom directive to do so.
Use prefers-reduced-motion
media query to deactivate view transitions animations if the user wants to.
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
Run npm install
to install dependencies.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.