How in angular to animate a child element before the parent element starts the :leave animation?

Question

Angular

In the element list example , when an element is removed, the element performs a :leave animation.
There is a div inside the element that needs to be animated so that when the element is removed from the list, the div's animation is played.
How to solve this problem?

Answer 1

Probably worth using animateChild:

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