How can I implement navigation animations in Angular?

How can I implement navigation animations in Angular?

You can implement navigation animations in Angular using the Angular Router and the built-in animation capabilities of Angular. Would you like a code example?

Yes, please provide a code example.

Sure! First, you need to import the necessary modules in your app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

Then, in your component, you can define animations like this:

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  animations: [
    trigger('routeAnimation', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('0.5s', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('0.5s', style({ opacity: 0 }))
      ])
    ])
  ]
})

Finally, apply the animation in your template:

<div [@routeAnimation]>
  <router-outlet></router-outlet>
</div>

That looks great! How do I customize the animation duration?

You can customize the animation duration by changing the time string in the animate function. For example, animate('1s', ...) will make the animation last for one second.