Angular :leave animation in child elements create cascading delay

I have an animation sequence for enter and leave in my app.

animations: [
trigger('barSlideInOut', [
transition(':enter', [
style({transform: 'translateY(80px)'}),
animate('0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0)', style({transform: 'translateY(0px)'}))
]) ,
transition(':leave', [
style({transform: 'translateY(0px)'}),
animate('0.35s cubic-bezier(0.3, 0.0, 0.8, 0.15)', style({transform: 'translateY(80px)'}))
])
])
]


Child elements in this component also have their own animations.

On :enter everything works as expected, but on :leave I assume that children animations are delayed by parent animation duration because ngDestroy is not fired yet. It ends up with children simply disappear because parent is destroyed.

I there any solution to fix this to fire in same moment? Children animations are binded to host because these are reusable components.

Thanks.

Continue reading...