CSS дисплей один li за один раз

Question

Я использую Angular2. У меня есть список

<ul> 
     <li *ngFor="let show of (ann)"> 
      {{show}} 
     </li> 
    </ul> 

Я хотел бы отображать один li за раз в 3 секунды. Более того, это будет бесконечный цикл.

Вот мой массив:

ann: Array<any> = [ 
    { 
     name: "ABC" 
    }, 
    { 
     name: "DEF" 
    }, 
    { 
     name: "ZZZ" 
    } 
]; 

• Во-первых 3 вторые: отображение ABC
• следующее 3 второй: DEF дисплея и ABC будет исчез
• следующий 3 секунды: дисплей ZZZ и DEF будет исчезнет
• следующий 3 секунды: дисплей ABC, так как это конец массива. Это будет бесконечный цикл.

Как я могу это сделать с помощью CSS?

Answer 1

Мы могли бы достичь с помощью анимации в угловом 2

Проверить предпросмотре 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

Вы можете использовать Rxjs для того чтобы достигнуть этого
в шаблоне

<div> 
     <h2>Hello {{name}}</h2> 
    </div> 
<div *ngFor="let student of $students | async"> 
    {{student.name}} 
</div> 

и в компоненте

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

Если я понять вас лучше, что вы ищете что-то еще вот так:

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>

Или это:

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>