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:
- 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:
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!