使用Angular 2.0路由器進行頁面過渡動畫

Question

在Angular 2中我試圖通過Router onActivate方法在新組件中進行動畫處理。

我已經設置了普拉克這個問題的一個示範這裏： http://plnkr.co/FikHIEPONMYhr6COD9Ou

在頁面組件之一onActivate方法的一個例子：

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

說我的問題因爲我希望新組件在現有組件的頂層上的中生成動畫，但在添加新組件之前舊組件會從DOM中刪除。

有沒有什麼辦法可以延遲刪除前一頁，而新的動畫呢？

我發現這個類似的問題：Page transition animations with Angular 2.0 router and component interface promises 但該技術只是延遲的新加入之前刪除以前的組件的。

最終，我將根據我們從哪個/哪個頁面移動不同的動畫，因此在每個頁面組件中都有onActivate。

非常感謝您的幫助！

Answer 1

您可以添加一個「EchoComponent」在您的<router-outlet>是，創建routerOnDeactivate()在它<canvas>和drawImage() ...喜歡的東西：

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

這僅僅是一個僞代碼（從內存中寫它） ，但它應該說明你需要什麼這種方法。