CSS display one li at a time - css

Question

I am using Angular2. I have a list
<ul>
<li *ngFor="let show of (ann)">
{{show}}
</li>
</ul>
I would like to display one li at a time in every 3 second. Moreover, it will be infinite loop.
Here is my array:
ann: Array<any> = [
{
name: "ABC"
},
{
name: "DEF"
},
{
name: "ZZZ"
}
];
First 3 second: display ABC
next 3 second: display DEF and ABC will be disappeared
next 3 second: display ZZZ and DEF will be disappeared
next 3 second: display ABC since it is end of the array. It will be
infinite loop.
How can I do with CSS?

Answer 1

We could achieve with animations in angular 2
Check preview https://plnkr.co/edit/fNZLspjrendI5SdK5gBC?p=preview
app.component.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>

Answer 2

You can use Rxjs to acheive this
in template
<div>
<h2>Hello {{name}}</h2>
</div>
<div *ngFor="let student of $students | async">
{{student.name}}
</div>
and in component
students: Array<any> = [
{
name: "Alan"
},
{
name: "Jake"
},
{
name: "Harry"
},
{
name: "Susan"
},
{
name: "Sarah"
},
{
name: "Esther"
}
];
constructor() {
this.name = 'Angular2'
var timer = 0;
this.$students = Observable.from([[], ...this.students])
.mergeMap(x => Observable.timer(timer++ * 1000).map(y => x))
.scan((acc, curr, seed) => {
acc.push(curr);
return acc;
});
}
https://plnkr.co/edit/MgJkFskZRp39FubSUbmH?p=preview

Answer 3

If I'm understanding you better, you're looking for something more like this:
li {
opacity: 0;
animation: display 10s infinite;
}
li:nth-child(1) {
animation-delay: 1s;
}
li:nth-child(2) {
animation-delay: 3s;
}
li:nth-child(3) {
animation-delay: 5s;
}
li:nth-child(4) {
animation-delay: 7s;
}
li:nth-child(5) {
animation-delay: 9s;
}
#keyframes display {
0% { opacity: 1 }
20% { opacity: 0 }
}
<ul class="num-1">
<li>Jake</li>
<li>Esther</li>
<li>John</li>
<li>Ann</li>
<li>Someone</li>
</ul>
Or this:
li {
opacity: 0;
animation: display 10s infinite;
}
li:nth-child(1) {
animation-delay: 1s;
}
li:nth-child(2) {
animation-delay: 3s;
}
li:nth-child(3) {
animation-delay: 5s;
}
li:nth-child(4) {
animation-delay: 7s;
}
li:nth-child(5) {
animation-delay: 9s;
}
#keyframes display {
20% { opacity: 1 }
30% { opacity: 0 }
}
<ul class="num-1">
<li>Jake</li>
<li>Esther</li>
<li>John</li>
<li>Ann</li>
<li>Someone</li>
</ul>