Routing transition between 2 components without destroying first one?

Question

After searching for a whole day I'am stuck so I would like to ask for some help.

How can I achieve something like this in angular2: http://dfsq.github.io/ngView-animation-effects/app/#/page/1

What I mean is how to seamlessly transition between 2 pages using Router ? I can animate page change, but it's like this right now:

animation-in->first page loaded->animation-out->empty router outlet(as component is destroyed)->animation-in->second page loaded

But I would like to have:

animation-in->first page loaded->animation-out of first page->animation-in of second page->second page loaded->and here destroy first page

Any help would be appreciated :)

Answer 1

ok, so i got it working, if anyone is interested, here's my solution - any pointers to better one are welcome as i'am noob in angular world :)

public activate(nextInstruction: ComponentInstruction): Promise<any> {
      let previousInstruction = this.currentInstruction;

      this.currentInstruction = nextInstruction;

      let componentType = nextInstruction.componentType;
      let childRouter = this.parentRouter.childRouter(componentType);

      let providers = ReflectiveInjector.resolve([
          provide(RouteData, {useValue: nextInstruction.routeData}),
          provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}),
          provide(routerMod.Router, {useValue: childRouter})
      ]);

      this.previousComponentRef = this.currentComponentRef;

      return this.loader.loadNextToLocation(componentType, this.currentElementRef, providers)
          .then((componentRef) => {

              this.currentComponentRef = componentRef;

              Observable.of(true).delay(100).toPromise().then(response => {
                if(this.previousComponentRef){
                  this.previousComponentRef.location.nativeElement.className = 'animateout';
                }
                this.currentComponentRef.location.nativeElement.className = 'animatein';
              });

              if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) {
                  return (<OnActivate>componentRef.instance)
                      .routerOnActivate(nextInstruction, previousInstruction);
              }
          });


}


public routerCanDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
    if (isBlank(this.currentInstruction)) {
        return this.resolveToTrue;
    }

    let ref = this.currentComponentRef;

    Observable.of(true).delay(2000).toPromise().then(response => {
        ref.destory();
    });

    return this.resolveToTrue;
}

as you can see a i have extended router-outlet and implemented two above methods where first adds animation classes to component, and second one waits with components dispose to allow animation, here's example animation (dm-page,dm-home,dm-contact are component selectors):

dm-page, dm-home, dm-contact{position: fixed;top:100%; left:0; width: 100%; height: 100%;
 -webkit-transition: top .8s ease-in-out;
-moz-transition: top .8s ease-in-out;
-o-transition: top .8s ease-in-out;
transition: top .8s ease-in-out;}

.animatein {top:0;}
.animateout {top:-100%;}