我正在使用 Angular2。我有一个 list
<ul>
<li *ngFor="let show of (ann)">
{{show}}
</li>
</ul>
我想每 3 秒一次显示一里。而且会死循环。
这是我的数组:
ann: Array<any> = [
{
name: "ABC"
},
{
name: "DEF"
},
{
name: "ZZZ"
}
];
- 前3秒:显示ABC
- 接下来3秒:显示DEF,ABC消失
- 接下来3秒:显示ZZZ,DEF消失
- 接下来的 3 秒:显示 ABC,因为它是数组的末尾。这将是 无限循环。
如何使用 CSS?
最佳答案
我们可以用 Angular 2 实现动画
查看预览 https://plnkr.co/edit/fNZLspjrendI5SdK5gBC?p=preview
应用程序组件.ts
@Component({
selector: 'my-app',
animations: [
trigger('displayName', [
state('in', style({ opacity: 1, transform: 'translateY(0)' })),
state('out', style({ opacity: 0, display: "none", transform: 'translateY(100%)' })),
transition('in => out', [
style({ transform: 'translateY(0)', opacity: 1 }),
animate('0.3s', style({ transform: 'translateY(100%)', opacity: 0 }))
]),
transition('out => in', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('0.3s 200ms', style({ transform: 'translateY(0)', opacity: 1 }))
])
])
]
})
export class App {
name:string;
currentIndex: number;
students: [] = [
{
name: "Alan",
animationState: 'in'
},
{
name: "Jake",
animationState: 'out'
},
{
name: "Harry",
animationState: 'out'
},
{
name: "Susan",
animationState: 'out'
},
{
name: "Sarah",
animationState: 'out'
},
{
name: "Esther",
animationState: 'out'
}
];
constructor() {
this.name = 'Angular2';
this.currentIndex = 0;
}
ngOnInit() {
setInterval((function(){
console.log(this.currentIndex);
this.students[this.currentIndex].animationState = 'out';
this.currentIndex++;
if(this.currentIndex >= this.students.length) {
this.currentIndex = 0;
}
this.students[this.currentIndex].animationState = 'in';
}).bind(this), 3000);
}
}
html
<div>
<h2>Hello {{name}}</h2>
</div>
<div *ngFor="let student of students" [@displayName]="student.animationState">
{{student.name}}
</div>
关于CSS 一次显示一里,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41478013/