大佬教程收集整理的这篇文章主要介绍了Angular 2动画* ng对于在RC 5中使用新的动画支持,一个接一个的列表项,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要列表显示一些动画,但一个接一个。我的意思是每个列表项应该在其他动画之后。
我正在尝试这样的事情:
import { Component,Input,trigger,state,animate,transition,style } from '@angular/core'; @Component({ SELEctor: 'list-item',template: ` <li @flyInOut="'in'">{{item}}</li>`,animations: [ trigger('flyInOut',[ state('in',style({ transform: 'translateX(0)' })),transition('void => *',[ style({ transform: 'translateX(-100%)' }),animate(100) ]),transition('* => void',[ animate(100,style({ transform: 'translateX(100%)' })) ]) ]) ] }) export class ListItemComponent { @input() item: any; }
在我的列表组件模板我使用它像:
<ul> <li *ngFor="let item of list;"> <list-item [item]="item"></list-item> </li> </ul>
它的作用是一次显示整个列表。我想要一些项目进入一些动画。
@Component({ SELEctor: 'my-app',template: ` <ul> <li *ngFor="let hero of staggeringHeroes; let i = index" (@flyInOut.donE)="doNext()" [@flyInOut]="'in'" (click)="removeMe(i)"> {{hero}} </li> </ul> `,animations: [ trigger('flyInOut',[ state('in',style({transform: 'translateX(0)'})),[ animate(300,keyframes([ style({opacity: 0,transform: 'translateX(-100%)',offset: 0}),style({opacity: 1,transform: 'translateX(15pX)',offset: 0.3}),transform: 'translateX(0)',offset: 1.0}) ])) ]),keyframes([ style({opacity: 1,transform: 'translateX(-15pX)',offset: 0.7}),style({opacity: 0,transform: 'translateX(100%)',offset: 1.0}) ])) ]) ]) ] }) export class App { heroes: anY[] = ['Alpha','Bravo','Charlie','Delta','Echo','Foxtrot','Golf','Hotel','India']; next: number = 0; staggeringHeroes: anY[] = []; constructor(){ this.doNext(); } doNext() { if(this.next < this.heroes.length) { this.staggeringHeroes.push(this.heroes[this.next++]); } } removeMe(i) { this.staggeringHeroes.splice(i,1); } }
以上是大佬教程为你收集整理的Angular 2动画* ng对于在RC 5中使用新的动画支持,一个接一个的列表项全部内容,希望文章能够帮你解决Angular 2动画* ng对于在RC 5中使用新的动画支持,一个接一个的列表项所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。