Angular анимация, если условие выполнено

Question

У меня есть анимация в angular приложении

@Component({
  selector: 'app-portfolio',
  templateUrl: 'portfolio.page.html',
  styleUrls: ['portfolio.page.scss'],
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

Однако есть два элемента в одной и той же позиции, которые ее используют, и они не могут быть на экране одновременно. Поэтому, если я выберу показ одного элемента, другой элемент будет автоматически скрыт. Проблема в том, что я просто хочу, чтобы элемент анимировался, если другой элемент не был анимирован. Есть ли способ показать анимацию, только если условие выполнено? Как то так?

  <ion-item color="primary" (element2open === false)=[@slideInOut] *ngIf="openElement1" lines="none">
  </ion-item>
  <ion-item color="primary" (element1open === false)=[@slideInOut] *ngIf="openElement2" lines="none">
  </ion-item>

Answer 1

Решение 1:

Вы можете отключить анимацию, используя:

  @HostBinding('@.disabled')
  public animationsDisabled = false;

Этот набор для вашего компонента css класс: ng-animate-disabled

См. Пример здесь , установив флажок «Переключить все анимации»

Решение 2: Чтобы избежать одновременной анимации, вы можете использовать sequence () для запуска анимации в заданном порядке.

trigger('slideInOut', [
  transition('* => *', [
    sequence([
      query(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ], {optional: true}),
      query(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ], {optional: true})
    ])
  ])
])

При этом будут запущены первые анимации, а вторая - анимация. Измените порядок в массиве, если вы хотите использовать обратную последовательность.

Убедитесь, что вы пометили родительский элемент @slideInOut, а не элементом item.

<parent @slideInOut>
  <ion-item color="primary"  *ngIf="openElement1" lines="none">
  </ion-item>
  <ion-item color="primary" *ngIf="openElement2" lines="none">
  </ion-item>
</parent>