Angular Анимация «В» должна ждать, прежде чем «Выйти»

Question

Я получил это html:

<ul>
  <li *ngFor="let item of menu" [ngClass]="{'active' : item.active}" [@fadeInDown]>
    <a (click)="changeItems()">{{ item.menu_title }}</a>
  </li>
</ul>

Когда я нажимаю на элемент, меню меняется: текущие элементы заменяются другими. Есть ли способ получить анимацию «из» нового после анимации «из» старого? Потому что на данный момент новые элементы появляются рядом со старыми, а затем идут слева вместо старых, когда анимация завершена. Смотрите мой файл анимации на всякий случай.

export const fadeInDown = trigger('fadeInDown', [
  transition(':enter', [
    style({ opacity: 0, marginTop: '30px' }),
    animate('2.5s ease-out', style({ opacity: 1, marginTop: '0px' }))
  ]),
  transition(':leave', [
    animate('2.5s ease-out', style({ opacity: 0 }))
  ]),
]);