Page transition animations with Angular 2.0 router

Question

In Angular 2 I am trying to animated in new components via the Router onActivate method.

I have set up a Plunk with a demonstration of the issue here: http://plnkr.co/FikHIEPONMYhr6COD9Ou

An example of the onActivate method in one of the page components:

routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
    document.getElementsByTagName("page3")[0].className='animateinfromright';
}

The issue that I'm having is that I want the new components to animate in on top of the existing component, but the old component is removed from the DOM before the new component is added.

Is there any way to delay the removal of the previous page while the new one animates in?

I found this similar issue: Page transition animations with Angular 2.0 router and component interface promises but the technique just delays the removal of the previous component before the new one is added.

Eventually I will have different animations depending on which page we are moving from / to, hence having the onActivate in each of the page components.

Many thanks for any help!

Answer 1

You could add an "EchoComponent" where your <router-outlet> is, create a <canvas> in it and drawImage() on routerOnDeactivate()... Something like:

@Component({
  template: `<canvas #canvas *ngIf="visible"></canvas>`
})
class EchoComponent {
  @ViewChild("canvas") canvas;
  public visible = false;

  constructor(private _shared: SharedEmitterService) {
    this._shared.subscribe(el => el ? this.show(el) : this.hide(el));
  }

  show(el) {
    this.canvas.drawImage(el);
    this.visible = true;
  }
  hide() {
    this.visible = false;
  }
}

@Component({...})
class PrevRoute {
  constructor(private _eref: ElementRef, 
              private _shared: SharedEmitterService) {}

  routerOnDeactivate {
    this._shared.emit(this._eref.nativeElement);
  }
}

@Component({...})
class NextRoute {
  constructor(private _eref: ElementRef, 
              private _shared: SharedEmitterService) {}

  routerOnActivate {
    this._shared.emit(false);
  }
}

This is just a pseudo code (writing it from memory), but it should illustrate what would you need for this approach.