[Bug] OverlayRef on detach will strip panel class before an animation completes

[byronmejia]

Bug

Panel Class is stripped before animation completes if panel class is animated on detach(). After running a git bisect, I found this was introduced in commit 79bacf2.

https://github.com/angular/material2/blob/19ce1a164e5f861d7744d2f55e1e1b0d29ba32b5/src/cdk/overlay/overlay-ref.ts#L177-L179

This was previously working perfectly in previous versions of @angular/cdk

See /pull/12142

What is the expected behavior?

The class should only be removed after the animation has completed, observer:

What is the current behavior?

The class now gets stripped immediately on detach, even if the component is still running through an animation. Observe:

What are the steps to reproduce?

Will supply a StackBlitz soon, but this is only noticable when an animation exists on the component sitting in the ComponentPortal.

An extract from our code:

@Component({
    selector: 'sc-context-menu',
    templateUrl: './context-menu.component.html',
    styleUrls: ['./context-menu.component.scss'],
    animations: [
        trigger('fadeInOut', [
            state('*', style({ opacity: 1, transform: 'translate3d(0, 0, 0)' })),
            transition(
                ':enter',
                [style({ opacity: 0, transform: '{{ transform }}' }), animate(100)],
                { params: { transform: 'translate3d(0, 0, 0)' } }
            ),
            transition(
                ':leave',
                [animate(100, style({ opacity: 0, transform: '{{ transform }}' }))],
                { params: { transform: 'translate3d(0, 0, 0)' } }
            )
        ])
    ]
})

[byronmejia]

Thanks team! Appreciate the support! 😎

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}