javascript - ฉันจะสามารถใช้แอนิเมชันกับรายการขององค์ประกอบทีละรายการโดยใช้แอนิเมชันของ Angular 4 ได้อย่างไร?

ฉันกำลังพยายามใช้แอนิเมชันของ Angular 4 กับรายการขององค์ประกอบ HTML เช่น

facilities = ['<p> <span class="glyphicon glyphicon-hand-right"> </span> Text 1</p>',
        '<p> <span class="glyphicon glyphicon-hand-right"></span>Text 2</p>',
        '<p> <span class="glyphicon glyphicon-hand-right"></span> Text 3</p>',
        '<p> <span class="glyphicon glyphicon-hand-right"></span> Text 4</p>',
];

ทีละหนึ่งด้วยโค้ดด้านล่าง:

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%)'}))
    ])
  ])
]

เมื่อฉันใส่ทริกเกอร์นี้กับองค์ประกอบของรายการ องค์ประกอบทั้งหมดปรากฏบนหน้าจอพร้อมกันทั้งหมด ฉันต้องการให้พวกมันปรากฏทีละตัว เช่น ดึงข้อความ 1 แล้วข้อความ 2 บน HTML ฉันจะทำอย่างนั้นได้อย่างไร?

คำตอบ #1

อัปเดต: การใช้ staggers:

HTML:

<ul [@listAnimation]="items.length">
       <li *ngFor="let item of items" >
          <div [innerHTML]="item"></div>
       </li>
</ul>

ไทป์สคริปต์:

....
animations: [
    trigger('listAnimation', [
   transition('* => *', [

     query(':leave', [
      stagger(500, [
        animate(1000, style({ opacity: 0 }))
      ])
    ], { optional: true }),
     query(':enter', [
           style({ opacity: 0 }),
 stagger(500, [
        animate(1000, style({ opacity: 1 }))
      ])
    ], { optional: true })
  ])
...

สาธิต

มันสามารถทำได้ด้วยการเรียกกลับของแอนิเมชันใน Angular และด้วยความช่วยเหลือบางอย่างที่เขียนใน TypeScript

เอชทีเอ็มแอล:

 <ul>
    <li *ngFor="let item of listCopy;" (@flyInOut.done)="getNextItem()" [@flyInOut]="'in'" >
     <ul>
        <li *ngFor="let item of list" (@flyInOut.done)="getNextItem()" [@flyInOut]="'in'" >
           <div [innerHTML]="item"></div>
        </li>
     </ul>        
   </li>
 </ul>

ไทป์สคริปต์:

   .....
   @Component({
   ....
   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%)'}))
        ])
      ])
    ]
    ....
    list = ['Item1', 'Item2', 'Item3', 'Item4'];
    listCopy = []; 
    next: number = 0;

    constructor(){
        this.getNextItem();
    }

    getNextItem() {
        if(this.next < this.list.length) {
          this.listCopy.push(this.list[this.next++]);
        }
    }

Plunker (ฉันตั้งค่า 1000ms เพื่อเน้นการเคลื่อนไหว)