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?
Is staggered animation not included in RC2?
A staggered animation consists of sequential or overlapping animations. To create a staggered animation, use multiple Animation objects. One AnimationController controls all of the Animation s.
Each time an animation is triggered in Angular, the parent animation always gets priority and child animations are blocked. For a child animation to run, the parent animation must query each of the elements containing child animations and then let the animations run using the animateChild() function.
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: What is the JavaScript version of sleep()?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With