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).