Angular Route Transition Animations

This challenge focuses on implementing smooth and engaging route transition animations in an Angular application. Enhancing user experience by visually indicating navigation between different views is a common requirement in modern web applications, and Angular's animation module provides powerful tools to achieve this.

Problem Description

Your task is to implement route transition animations for a multi-page Angular application. When a user navigates between different routes, the old component should animate out, and the new component should animate in. This should create a seamless and visually appealing transition experience for the user.

Key Requirements:

Entry/Exit Animations: Implement distinct animations for components entering and leaving the DOM during route changes.
Dynamic Animation Based on Direction: The animation should ideally adapt based on the direction of navigation (e.g., sliding in from the right for forward navigation, from the left for backward navigation). This is a stretch goal, but highly desirable.
Global Application: The animations should be applied to all routes within the application.
Use Angular Animations: Leverage Angular's built-in animation capabilities (@angular/animations module).
Component Reusability: The animation logic should be encapsulated in a way that's easily reusable across different components.

Expected Behavior:

When navigating from Route A to Route B:

Component A begins its exit animation.
Simultaneously, Component B begins its entry animation.
Once Component A has fully exited, it is removed from the DOM.
Once Component B has fully entered, it is visible to the user.

Edge Cases:

Rapid Navigation: What happens if a user navigates rapidly between routes before an animation has completed?
Initial Load: The initial load of the application should not have any transition animations.

Examples

For simplicity, let's assume a basic two-route application with a "Home" component and a "About" component.

Example 1: Basic Fade Animation

Scenario: Navigating from the Home page to the About page.
Input: Angular application structure with two routes defined (/ for Home, /about for About).
Output: When navigating to /about, the Home component fades out, and the About component fades in. When navigating back to /, the About component fades out, and the Home component fades in.

Example 2: Slide Animation (Forward)

Scenario: Navigating from the Home page to the About page using a "Go to About" button.
Input: Angular application structure with two routes.
Output: The Home component slides out to the left, and the About component slides in from the right.

Example 3: Slide Animation (Backward)

Scenario: Navigating back from the About page to the Home page using a "Go to Home" button.
Input: Angular application structure with two routes.
Output: The About component slides out to the right, and the Home component slides in from the left.

Constraints

The project must be built using Angular version 14 or higher.
The solution must use TypeScript.
The animation implementation should not significantly degrade the application's performance on modern browsers.
External animation libraries beyond @angular/animations are not permitted.

Notes

Consider using Angular's router-outlet directive and its [@.disabled] property for initial load scenarios.
The AnimationBuilder and style, animate, sequence, parallel, trigger, state, and transition functions from @angular/animations will be your primary tools.
Think about how to pass information about the navigation direction to your animation trigger. This might involve inspecting the router state.
A common pattern for route animations involves wrapping the router-outlet with an element that has the animation trigger applied.