анимация рывков на нгиф

Question

Я анимирую список с помощью Angular 6. Идея в том, что я хочу щелкнуть по разделу субтитров, а затем сдвинуть элемент div к его последнему элементу, отображая сначала всю высоту списка. После этого варианты исчезнут в зарезервированное пространство.

Теперь моя анимация работает именно так, как мне хотелось бы, но вот та часть, которая сводит меня с ума: визуальный рывок при смещении элементов на странице. В html есть условие ngIf, которое позволяет блоку отображаться только при наличии элементов. Визуальный рывок на странице, которую я вижу, связан с добавлением div в DOM. Когда div добавляется, он сдвигает элемент под ним примерно на 10-20 пикселей.

Я пытался использовать неразрывный пробел с примерно такой же высотой, но это, кажется, преувеличивает отклик, только делая его намного хуже - один элемент не исчезает / появляется, пока уменьшенный элемент не завершит свою последовательность. Есть мысли?

Вот пример HTML:

 <div class="uploaded-files"  [@fadeAnimation]="getToggleState()">
<div *ngFor="let document of documentation">
  <div *ngIf="getToggleState()" class="uploaded-file-iterator">
    <div class="uploaded-filenames">{{document.fileName}}</div>
    <button mat-button (click)="removeDocument(document.uploadId)" class="warn-ctrl-btn">
      <i class="fa fa-times-circle"></i>
    </button>
  </div>
</div>

вот анимация:

trigger('fadeAnimation', [

transition( '* => *', [

  query(':enter',
    [
      style({ opacity: 0, height: 0 })
    ],
    { optional: true }
  ),

  query(':leave',
    [
      style({ opacity: 1, height: '*' }),
      sequence([
        animate('0.4s', style({ opacity: 0 })),
        animate('0.5s', style({ height: 0 })),
      ])
    ],
    { optional: true }
  ),

  query(':enter',
    [
      style({ opacity: 0, height: 0 }),
      sequence([
        animate('.4s', style({ height: '*' })),
        animate('.5s', style({ opacity: 1 }))
      ])
    ],
    { optional: true }
  )

])

]);

Answer 1

Используйте <ng-container>. Это решит вашу проблему.

<ng-container *ngIf="foo">
    <ng-container *ngIf="bar">
        ...
    </ng-container>
</ng-container>

Для получения дополнительной информации, обзор здесь

Answer 2

Добавьте div-обертку к div, который содержит * ngIf, например:

<div class="my-wrapper">
  <div *ngIf="blah">

  </div>
</div>

Затем добавьте минимальную высоту к обертке:

.my-wrapper {
   min-height: 30px;
}

Это остановит илиминимизировать прыжки.