Как в angular анимировать дочерний элемент перед тем как родительский элемент начнет :leave анимацию?

Question

[mr_blond97]

В примере лист элементов, при удалении элемента элемент выполняет :leave анимацию.
Внутри элемента есть div, который нужно анимировать так что бы при удалении элемента из списка проигрывалась анимация div'а.
Как решить эту задачу?

Answer 1

[0xD34F]

Наверное, стоит использовать animateChild:

import { query, animateChild } from '@angular/animations';

animations: [
  trigger('parentAnimation', [
    transition(':leave', [
      query('@itemAnim', [
        animateChild()
      ])
    ])
  ]),
  trigger('itemAnim', [
    transition(':enter', [
      animate(500)
    ]),
    transition(':leave', [
      group([
        animate('0.5s ease', style({ transform: 'translateY(-20%)', 'height':'0px' })),
        animate('0.5s 0.2s ease', style({ opacity: 0 }))
      ])
    ])
  ])
]