Angular - Animation between pages (after changing route)

Question

I'm still new to Angular 2 and was wondering if there is a way to let a component 'fly in' and let another component 'fly out' when switching routes. Let's say I have 2 components: Test1Component and Test2Component and 2 routes pointing to each of them. What would be the best way to do it?

Answer 1

https://github.com/angular/angular/issues/9845#issuecomment-235799008

RC5 will hopefully be out this week, if not then next week.

For now (with RC5) you will need to do this for every component that is routed to and you want to add animations to:

@Component({
   host: {
     '[@routeAnimation]': 'true'
   },
   animations: [
      trigger('routeAnimation', [
         transition('* => void', animate(...)),
         transition('void => *', animate(...))
      ])
   ]
})
class Cmp { }

Once we get query() and $variables into animations then you can use <router-outlet> with the URL API that I wrote above.

Answer 2

I found a great article about routing animations in angular 4.2 and up.

https://alligator.io/angular/animating-route-changes/?utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_223