📄 Angular Animations Tutorial: Route Transitions

#angular #ui_element #provideRouter #provideAnimations

export const routeTransition = trigger(
  'routeTransition', [
  transition('* => *', [
    query(':enter', [
      style({ 
        opacity: 0, 
        scale: 0.9 
      }),
    ], { optional: true }),
    query(':leave', [
      animate('0.2s', style({ 
          opacity: 0, 
          scale: 0.9 
      }))
    ], { optional: true }),
    query(':enter', [
      animate('0.2s', style({ 
        opacity: 1, 
        scale: 1 
      }))
    ], { optional: true })
  ])
])

    <app-nav></app-nav>
    <div 
      [@routeTransition]="data" 
      style="display: contents"
    >
        <router-outlet></router-outlet>
    </div>

✅ Article link

🎁 Code link