如何在角2

不同的路線之間適用不同的動畫我有一個測試應用程序建立與角2，我已經成功地應用於一個動畫路徑變化之間如何在角2

state('default', style({ 
    opacity: 1, 
    transform: 'scale(1) translateY(0)' 
})), 
transition('void <=> default', [ 
    style({ opacity: 0, transform: 'scale(.9) translateY(-20px)' }), 
    animate('.2s') 
])

但我也希望有一個不同的動畫時，列表頁面更改商品頁面，就像單擊英雄英雄列表裏面，所以我做了這個

state('childActivate', style({ 
    opacity: 1, 
    transform: 'scale(1) translateY(0)' 
})), 
transition('childActivate => void', [ 
    animate('1.2s', style({ 
     transform: 'scale(0.9) translateY(-120px)', 
     opacity: 0 
    })) 
])

我試圖狀態設置爲「childActivated」後，我的一個項目，在導航前點擊：

onHeroSelected(heroEvent: Hero) { 
    this.animState = "childActivate"; 
    this.router.navigate(['/hero-detail', heroEvent.id]); 
}

但沒有效果。

我怎樣才能獲得路線之間的多個動畫？

來源

2016-12-04 Gavin

嘿@Gavin，我知道這可能不是你要找的答案，但它可能是一個很好的夠另類。我一直在使用[animate.css]（https://daneden.github.io/animate.css/）一段時間，我喜歡它。我所做的只是在組件的內容中添加一個包裝，並添加了「動畫淡入」類，其中淡入僅僅是一種動畫類型，可以從中選擇很多。檢查出來：https://plnkr.co/edit/QF3vmQhRktrWllNlXnoN?p=preview –

設置狀態爲「childActivate」沒有效果，因爲該組件正被下一個變化檢測步驟中被破壞，所以狀態切換到無效代替。

這是我如何解決這個問題：我耽誤了1個進一步變更檢測週期路由變化。我使用了CanDeactivate Guard來監聽這個解決方案。

看看我plnkr： https://embed.plnkr.co/cOeDfXCetaYuXFaZ7WeO/

在路由定義我補充一下：

canDeactivate: [CanDeactivateAfterChangeDetectionGuard]

這是CanDeactivate後衛：

@Injectable() 
class CanDeactivateAfterChangeDetectionGuard implements CanDeactivate<WaitForChangeDetection> { 
    canDeactivate(component: WaitForChangeDetection): Promise<boolean> { 
    return component.waitForChangeDetection(); 
    } 
}

與實現此接口的任何部件的工作原理：

declare abstract class WaitForChangeDetection { 
    abstract waitForChangeDetection(): Promise<boolean>; 
}

我創建了一個基本組件與該接口

@Component({}) 
class WaitForChangeDetectionImpl implements AfterViewChecked, WaitForChangeDetection { 
    constructor(private cdRef: ChangeDetectorRef){ 
    this.viewChecked$ = new Subject<void>(); 
    } 

    viewChecked$: Subject<void>; 
    waitForChangeDetection(): Promise<boolean>{ 
    this.cdRef.detectChanges(); 
    return new Promise((resolve) => this.viewChecked$.subscribe(() => resolve(true))); 
    } 

    ngAfterViewChecked(){ 
    this.viewChecked$.next(); 
    } 
}

的默認實現這樣可以延長這個組件來提供保護的任何組件工作的功能。

@Component({}) 
class ComponentA extends WaitForChangeDetectionImpl { 
...

來源

2017-03-22 10:12:19

回答

相關問題