Animações com angular: Como mover meu elemento inferior enquanto a escala reduz o tamanho do elemento acima?

Possuo três cards e estou tentando aplicar uma animaton com scale() reduzindo e aumentando o tamanho do card quando o segundo cartão é exibido ou removido. Meu problema é que, quando removo o segundo elemento, meu terceiro elemento espera a animação do segundo card terminar para ocupar a posição do segundo card.

Isto é o que eu tentei:

animations: [
trigger(
  'scaleAnimation', [
    transition(':enter', [
      style({transform: 'scale(0)', opacity: 0}),
      animate('500ms', style({transform: 'scale(1)', opacity: 1}))
    ]),
    transition(':leave', [
      style({transform: 'scale(1)', opacity: 1}),
      animate('500ms', style({transform: 'scale(0)', opacity: 0}))
    ])
  ]
)

]

No meu template:

<div class="card">
    The first content
</div>

<div [@scaleAnimation] *ngIf="showSecondCard === true" class="card">
 The second content
  <button type="button" (click)="removeSecondCard()">Remove</button>
</div>

<div class="card">
  The third content
</div>

Stackblitz

Como posso fazer com que o terceiro elemento ocupe a posição do segundo elemento de forma gradativa enquanto a animação em escala do segundo elemento está em execução?
Tentei algumas alternativas setando o card como position: absolute mas não ficou como esperava.