Я пытаюсь применить анимацию / переходы ng-animate к списку товаров, но я застрял в этом, любая помощь будет оценена - PullRequest
Новая
       31

Я пытаюсь применить анимацию / переходы ng-animate к списку товаров, но я застрял в этом, любая помощь будет оценена

0 голосов
/ 24 июня 2019

Я использую ионный 4 , угловой 7 , ng-animate

ниже приведен код моего списка товаров. 

<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>

введите описание изображения здесь

1 Ответ

0 голосов
/ 24 июня 2019

Вы действительно не предоставили достаточно информации здесь.

Если вы посмотрите на ссылку, которую вы указали для ng-animate, в нее встроено руководство:

Вы застряли в определенной точке?

Общая идея заключается в том, что вы готовите анимации в файле .ts, а затем запускаете их в разметке:

// 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;
}

, а затем триггер: 

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