Angular 2惊人的动画 [英] Angular 2 Staggering Animation
问题描述
Angular 2 RC2刚问世,我想知道它是否已经支持 * ngFor
的交错动画? DSL语言文档中提到了 group
和 sequence
,但是没有任何错位吗?
Angular 2 RC2 just came out and I am wondering whether it already supports staggered animations for *ngFor
? The DSL language documentation mentions group
and sequence
but no stagger of any kind?
RC2中不包含交错动画吗?
Is staggered animation not included in RC2?
推荐答案
我不确定是否同意Günter的观点ng-conf功能位于最新的RC.3中或与此相关的RC.4版本中。交错功能会很出色,但从目前看来,RC.5并不适合它。绝对会在 Angular 2 Final
版本中,您可以在此动画跟踪中看到门票。话虽如此,尽管我确实为我的应用程序创建了一种解决方法,但我还是愿意分享。可能有一种更简单的方法,但这可行:
I'm not sure if I agree with Günter that the ng-conf features are in the newest RC.3 or for that matter in the RC.4 release. A stagger feature would be excellent but as of current that doesn't look like it's slated for RC.5. It will definitely be in the Angular 2 Final
release as you can see on this animation tracking ticket. With that being said though I did create a workaround for my application I would be willing to share. There might be an easier approach but this works:
@Component({
selector: 'child',
templateUrl: `<div @fadeIn="state">This is my content</div>`,
animations: [
trigger('fadeIn', [
state('inactive', style({opacity:0})),
state('active', style({opacity:1)})),
transition('inactive => active', [
animate('500ms ease-in')
])
])
]
})
export class Child implements OnInit {
@Input() delay;
constructor() {
this.state = 'inactive';
}
ngOnInit() {
this.sleep(this.delay).then(() => {
this.state = 'active';
};
}
// HELPER*
sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
}
@Component({
selector: 'parent',
templateUrl: `
<div *ngFor="let child of children">
<child [delay]="child.delay"></child>
</div>
`
})
export class Child implements OnInit {
constructor() {
this.children = [];
this.children.push({ delay: 600 });
this.children.push({ delay: 1200 });
}
}
就像我说也许不是最简单的方法,但对我有用。希望对您有帮助!
Like I said maybe not the simplest way but it works for me. Hope it helps you!
* HELPER: W帽子是sleep()的JavaScript版本吗?
*HELPER: What is the JavaScript version of sleep()?
这篇关于Angular 2惊人的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!