Page transition animations with Angular 2.0 router and component interface promises

As you quoted from the docs, if any of this hooks returns a Promise it will wait until its completed to move to the next one, so you can easily return a Promise that basically does nothing and wait a second (or as many time as you need).

 onActivate(next: ComponentInstruction, prev: ComponentInstruction) {    TweenMax.fromTo($(".title"), 1, {opacity: 0}, {opacity: 1});    return new Promise((res, rej) => setTimeout(() => res(1), 1000));  }  onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {    TweenMax.fromTo($(".title"), 1, {opacity:1}, {opacity: 0});    return new Promise((res, rej) => setTimeout(() => res(1), 1000));  }

Note that I'm returning a Promise which runs a setTimeout. We wait a second to give the animation time enough to be completed.

I don't really like using setTimeouts, so we can use Observables as well, that personally I like the best.

return Rx.Observable.of(true).delay(1000).toPromise();

Here I'm passing a random value (true in this case) and delay it a second and finally cast it to Promise. Yes, it ends up being a Promise but I don't use it directly.

Here's a plnkr with an example working (expecting to be what you are looking for).

PS: If sometimes it complains about that it can't find a path to Rx, just keep refreshing until it works (I added Rx.js manually and it's a little heavy for plnkr apprently).

Angular 2 final solution:

plunk

In a nutshell, we can to use the @routeAnimation built-in directive to achieve this. Each of our components representing a child route will be decorated with something like:

@Component({  selector: 'app-pageone'  host: { '[@routeAnimation]': 'true' },  styles: [':host { width: 300px; display: block; position: absolute; }']  animations: [    trigger('routeAnimation', [      state('*', style({transform: 'translateX(0)', opacity: 1})),      transition('void => *', [        style({transform: 'translateX(-100%)', opacity: 0}),        animate('0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)')      ]),      transition('* => void',        animate('0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)', style({          transform: 'translateX(100%)',          opacity: 0        }))      )    ])  ]})