解决方法
我不确定我是否同意Günter的ng-conf功能是最新的RC.3或RC.4版本中的问题.一个错开的功能将是非常好的,但目前看起来不像RC.5.它肯定会出现在Angular 2 Final版本中,你可以在这个动画中看到跟踪
ticket.尽管如此,虽然我确实为我的应用程序创建了一个解决方法,但我愿意分享.可能有一种更简单的方法,但这有效:
@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 }); } }
就像我说的可能不是最简单的方式,但它对我有用.希望它能帮到你!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。