CSS 一次显示一里

Question

我正在使用 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？

Answer 1

我们可以用 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>