Ionic animation in ionic 5

I’m having trouble doing some simple animation with ionic v5. This is my html

<div *ngIf="products.length > 0">
  <ion-list *ngFor="let pro of products" class="list">
    <ion-item>
      <ion-grid>
        <ion-row>
          <ion-col>
            // Making it simpler
          </ion-col>
        </ion-row>
      </ion-grid>
   </ion-item>
 </ion-list>
</div>

And this is ts

ionViewDidEnter() {
    const animation = this.animationCtrl.create()
      .addElement(document.querySelectorAll('.list'))
      .duration(1200)
      .iterations(1)
      .keyframes([
        { offset: 0, transform: 'translateY(-75px)', opacity: '0' },
        { offset: 0.3, transform: 'translateY(35px)', opacity: '0.5' },
        { offset: 1, transform: 'translateY(0px)', opacity: '1' }
      ]);

    animation.play();
  }

Now the problem is when the page shows whole list items animate at once while I want to animate each ion-item one by one. If I use document.querySelector instead of document.querySelectorAll only first ion-item got animated.

Please any help will be appreciated.

1 post - 1 participant

Read full topic