I am trying to apply ng-animate animation/transitions on product listing, but i got stuck into this any help will be appriciated

Question

I am using ionic 4, angular 7, ng-animate

below is my product listing code.

<div class="custom_cards" (click)="openModal()">
  <ion-item>
      <ion-avatar slot="start" class="fish_image">
          <img src="assets/images/fish.png">
      </ion-avatar>
      <ion-label>
          <h3 class="dish_name">Indian Rowas</h3>
          <p class="order_status">SAR 100</p>
          <p class="order_date">Rating : ⭐⭐⭐⭐⭐</p>
          <ion-button color="primary" fill="outline" class="add_btn">Add</ion-button>
      </ion-label>
  </ion-item>
</div>

enter image description here

Answer 1

You haven't really given enough information here.

If you look on the link that you provided for ng-animate then it has a guide built into it:

• https://www.npmjs.com/package/ng-animate

Have you got stuck at a specific point?

The general idea is that you prep the animations in the .ts file and then you trigger them in the markup:

// my-component.component.ts
import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce } from 'ng-animate';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.component.html',
  animations: [
    trigger('bounce', [transition('* => *', useAnimation(bounce))])
  ],
})
export class MyComponent {
  bounce: any;
}

and then trigger:

<!-- my-component.component.html -->
<div [@bounce]="bounce"></div>