I've been digging around the Angular2 documentation and there doesn't seem to be a simple way to add delays to animations. For reference, here is what I'm aiming to achieve: plunkr using jQuery
I want to use Angular2's animation features though since these "bars" are being generated within a loop. They animate fine, but all at once. I want to stagger them by 1s increments. Here's my main component file:
import {
Component,
Input,
trigger,
state,
style,
transition,
animate
} from '@angular/core';
export class Skill {
skill: string;
level: number;
}
const SKILLS: Skill[] = [
{ skill: 'x', level: 70 },
{ skill: 'y', level: 100 },
{ skill: 'z', level: 80 }
]
@Component({
selector: 'app-wrap',
template: `
<div *ngFor="let skill of skills; let i = index" class="skill">
<span class="bar" [style.width.%]="skill.level" [@expandSkill]> </span>
</div>
`,
animations: [
trigger('expandSkill', [
state('in', style({ width: 'auto' })),
transition('void => *', [
style({ width: '0' }),
animate('1000ms ease-in-out')
])
]
]
})
export class AppComponent {
skills = SKILLS;
}
I came across this other SO question that seems similar, but it was asked several months ago, before the final release.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…