Transition routing between two components without destroying the first?

Question

after searching the whole day when I was stuck, so I would like to ask for help.

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

I mean, how easy is it to go between 2 pages using Router? I can update the page change, but now like this:

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

but I would like to:

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

any help would be appriciated :)

Answer 1

ok, so I got it if someone is interested, here is my solution - any pointers to the best are welcome as i'am noob in the 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;
}

since you can see that ai has an extended router-exit and the two methods described above are implemented, in which animation classes are added to the component first, and secondly, with components designed for animation, here is an animation example (dm-page, dm-home , dm -contact - component selector):

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%;}