如何在角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

回答

相关问题