Как правильно анимировать объект в Angular, используя свойство [hidden]? - PullRequest
Новая
       37

Как правильно анимировать объект в Angular, используя свойство [hidden]?

1 голос
/ 31 марта 2020

Я новичок в Angular (9). Я только что узнал, что не могу использовать директиву *ngIf в некоторых случаях: например, при использовании всплывающих подсказок bootstrap (которые используют popper. js) по причинам, которые я пока не понимаю.

Я знаю, что мог бы использовать свойство [hidden] вместо *ngIf в родительском контейнере, и в этом случае всплывающие подсказки работали бы.

Однако, таким образом, я бы потерял простое в использовании :enter и :leave псевдонимы, используемые в анимации. Текущий код выглядит следующим образом:

ngif_directive_component.html: 

<div @grow *ngIf="showCard" class="card">
some content
</div>

ngif_directive_component.ts: 

  animations: [
    trigger('grow',[
      transition(':enter', [
        animate('500ms', keyframes([
          style({ height: '0', opacity: 0 }),
          style({ height: '*', opacity: 0 }),
          style({ height: '*', opacity: 1 }),
        ]))
    ]),
    transition(':leave', [
      animate('500ms', keyframes([
        style({ height: '*', opacity: 1 }),
        style({ height: '*', opacity: 0 }),
        style({ height: '0', opacity: 0 }),
      ]))
  ])
  ])]

Если заменить директиву *ngIf следующим образом: 

<div @grow [hidden]="showCard" class="card">
some content
</div>

Конечно, анимации больше не будут работать.

Я пытался сделать это 

<div [@grow]="showCard" [hidden]="showCard" class="card">
some content
</div>

  animations: [
    trigger('grow',[
      transition('false => true', [
        animate('500ms', keyframes([
          style({ height: '0', opacity: 0 }),
          style({ height: '*', opacity: 0 }),
          style({ height: '*', opacity: 1 }),
        ]))
    ]),
    transition('true => false', [
      animate('500ms', keyframes([
        style({ height: '*', opacity: 1 }),
        style({ height: '*', opacity: 0 }),
        style({ height: '0', opacity: 0 }),
      ]))
  ])
  ])]

Но в этом случае hide анимация больше не работает. Я полагаю, что карта скрыта до завершения анимации. Так как заставить работать обе анимации?

...