Переход между двумя компонентами без разрушения первого?

Question

после поиска целого дня i'am stuck, поэтому я хотел бы попросить некоторую помощь.

Как я могу добиться чего-то подобного в angular2: http://dfsq.github.io/ngView-animation-effects/app/#/page/1

, что я имею в виду, как плавно перейти от 2-х страниц с использованием маршрутизатора? я могу анимировать изменение страницы, но это, как это прямо сейчас:

анимация-in> первая страница loaded-> анимация-для улицы>пустой выпускной маршрутизатор (в качестве компонента уничтожается) -> анимация-in > вторая страница загружается

, но я хотел бы иметь:

анимационной-in> первую страницу loaded-> анимация отказ от первого PAGE-> анимации-ин второго PAGE-> второй страницы loaded-> и здесь уничтожить первую страницу

любая помощь будет определена :)

Answer 1

нормально, так что я получил это работает, если кому-то интересно, вот мое решение - любые указатели лучше один радушны, как i'am нуб в угловом мире :)

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

как вы можете видеть аи есть расширенный маршрутизатор-выход и реализовал два вышеописанных метода, в которых сначала добавляются классы анимации к компоненту, а второй - с компонентами, предназначенными для анимации, вот пример анимации (dm-page, dm-home, dm-contact - это селектор компонентов):

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