Angular v17’s View Transitions: Navigate in Elegance

Angular v17 debuts with integrated support for the cutting-edge View Transitions API. The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states. Dive deeper into this feature by following this link.

Angular’s Router now has an optional feature that activates and deactivates components using the document.startViewTransition callback. This ensures seamless transitions as you move between pages. Importantly, this feature gracefully handles browsers that don’t support view transitions, maintaining a consistent navigation experience.

Simple Integration

Using the View Transitions API is straightforward. Just follow these steps:

1. Import the withViewTransitions function:

import { provideRouter, withViewTransitions } from '@angular/router';

2. Add the withViewTransitions function to your provideRouter configuration:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      [...], // Your route configurations
      withViewTransitions() // Enable View Transitions
    ),
  ],
})

With this minimal setup, you can instantly enhance your application’s navigation with smooth fade-in and fade-out animations:

It might be hard to notice, but trust me, there’s a subtle animation happening here 😊

The View Transitions API allows you to create custom animations that match your application’s unique style. Whether you want eye-catching transitions or a more subtle effect, you have the freedom to tailor your animations to your liking.

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(30px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Follow me on Medium or Twitter to read more about Angular and JS!