Рывки анимации на ngif

Я анимирую список с помощью 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 }
  )

])

]);

2
0
634
2

Ответы 2

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

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

  </div>
</div>

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

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

Это остановит или сведет к минимуму прыжки.

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

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

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

Другие вопросы по теме