animation jerks on ngif

I'm animating a list using Angular 6. The idea here is that I want to click a subtitle section, then have the div slide down to it's last element rendering the full height of the list first. Afterwards the options will fade into the reserved space.

Now my animation is working exactly as I would like, but here's the part that is driving me bonkers: there's a visual jerk as the elements shift on the page. There is an ngIf condition on the html that only allows the block to render if it has elements. The visual jerk on the page I'm seeing is coming from the div being added to the DOM. When the div gets added it shifts the element below it down by about 10-20px.

I've tried using a nonbreaking space block with roughly the same height, but that seems to exaggerate the response only making it look much worse -- the one element doesn't disappear / appear until the animinated element finishes its sequence. Any thoughts?

Here is the html sample:

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

here's the animation:

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

])

]);