* ngFor中惊人的Angular2动画

我想使用Angular2的动画功能，因为这些条"是在循环内生成的.他们可以制作动画，但是可以同时进行.我想将它们错开1s的增量.这是我的主要组件文件: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]>&nbsp;</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;}我遇到了这个其他类似问题，但有人问了几个月在最终发行之前.解决方案将我的头撞到动画DSL上后，使惊人的动画变成了一件事情.我发现了一种制作动画的替代方法，它可以使人错开！诀窍是使用Renderer和Service来指定一个负责动画的指令来保存您的动画存储！指令重要代码this.animation = this.renderer.animate( this.element.nativeElement.firstElementChild || this.element.nativeElement, this.animService.getAnimation(animationName).startingStyles, this.animService.getAnimation(animationName).keyframes, this.duration, this.delay, this.easing);this.animation.pause();this.animation.play();如何在模板中使用它<div *ngFor="let str of ['foo','bar','baz']; let i = index" anim-aes [anim-aes-delay]="i*200" [anim-aes-duration]="500" [anim-aes-animation]="'fadeIn'" [anim-aes-animation-leave]="'fadeOut'" [anim-aes-play]="show"> click {{str}}</div>我用您需要的所有东西做一个工作正常的人！ plunkr 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 jQueryI 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]>&nbsp;</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. 解决方案 After hammering my head against the animation DSL to make staggering animations a thing. I found an alternative way of doing animations which allows staggering!The trick is to have a directive responsible of the animation using the Renderer and Service to hold your animation store!Directive important codethis.animation = this.renderer.animate( this.element.nativeElement.firstElementChild || this.element.nativeElement, this.animService.getAnimation(animationName).startingStyles, this.animService.getAnimation(animationName).keyframes, this.duration, this.delay, this.easing);this.animation.pause();this.animation.play();How to use it in template<div *ngFor="let str of ['foo','bar','baz']; let i = index" anim-aes [anim-aes-delay]="i*200" [anim-aes-duration]="500" [anim-aes-animation]="'fadeIn'" [anim-aes-animation-leave]="'fadeOut'" [anim-aes-play]="show"> click {{str}}</div>I made a working plunkr with everything you need!plunkr 这篇关于* ngFor中惊人的Angular2动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！