How to animate sequentially

Ionic Framework ionic-v3
1

Basically I want to animate my ion-cards sequentially, top-to-bottom style, since they are in a list. Right now my cards animate at the same time.

I get my data from my API, code looks like this:

datalength: number;
public information: any;
ionViewDidLoad() {
    this.http
        .get<Config>('http://localhost:5000/api/user/announcements')
        .subscribe((data) => {
            this.information = data.announcements;
            this.datalength = data.announcements.length;
        });
}

this is how my html looks like:

<ion-list>
    <ion-item class="getend">
        <ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice; let i=index" text-wrap>
            <ion-card-header text-wrap>
                <h2>{{item.title}}</h2>
            </ion-card-header>
            <ion-card-content style="margin-top: -20px; margin-bottom: -25px;">
                Date posted: {{item.date}}
            </ion-card-content>
            <button ion-button clear end style="float: right;" (click)="showDetails(item.title, item.date, item.content)">View</button>
        </ion-card>
    </ion-item>
</ion-list>

What can I do to animate them, one card after the other?

2

See:

3

wow thanks for this. I’ll check it out!