CODEWITHSUNDEEP
animationangularangular2-routing
Patryk Siwula
Patryk Siwula

Reputation: 107

Angular - Animation between pages (after changing route)

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?

Upvotes: 1

Views: 5175

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657308

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.

Upvotes: 3

Related Questions