Angular transition between states isn't animat

Question

I have a parent component with a nested child component, both have :enter and :leave animations. To run both animations in parallel I use group() and animateChild() functions. But, if the parent animate() call is located inside group() call, the parent state transition isn't animated.

animations: [
    trigger('child', [
        state('void', style({
            opacity: 0
        })),
        transition('void <=> *', animate('1750ms ease-in'))
    ]),
    trigger('parent', [
        state('void', style({
            height: 0
        })),
        transition('void <=> *', group([
            animate('1750ms ease-out'),
            query('@child', [
                animateChild()
            ])
        ]))
    ])
]

Because of this, I must describe void => * and * => void parent transitions separately, and move parent style description into the transitions. But in this case the parent animation description is much more complicated:

trigger('parent', [
    transition('void => *', [
        style({
            height: 0
        }),
        group([
            animate('1750ms ease-in', style({
                height: '*'
            })),
            query('@child', [
                animateChild()
            ])
        ])
    ]),
    transition('* => void', [
        style({
            height: '*'
        }),
        group([
            animate('1750ms ease-in', style({
                height: 0
            })),
            query('@child', [
                animateChild()
            ])
        ])
    ])
])

UPDATE:

The workaround above can be improved by moving the parent animation into a separate animation:

const parentAnimation = animation([
    style({
        height: '{{startHeight}}'
    }),
    group([
        animate('175ms ease-in', style({
            height: '{{endHeight}}'
        })),
        query('@child', [
            animateChild()
        ])
    ])
]);

@Component({
    animations: [
        trigger('parent', [
            transition('void => *', [
                useAnimation(parentAnimation, {
                    params: {
                        startHeight: 0,
                        endHeight: '*'
                    }
                })
            ]),
            transition('* => void', [
                useAnimation(parentAnimation, {
                    params: {
                        startHeight: '*',
                        endHeight: 0
                    }
                })
            ])
        ])
    ]
})

Answer 1

I found a workaround! Try swapping the query() and animate(). I think it's a bug, not sure.

I have reported this issue: https://github.com/angular/angular/issues/28654