Delayed Stylesheet Pruning when animate.leave exists

[thePunderWoman]

Command

serve

Description

Currently we aggressively prune stylesheets from the DOM when some elements are destroyed. Now that we have animate.leave in the framework, the aggressive pruning has the unintended side effect of removing the stylesheet that contains the defined animation styles. This ends up causing a weird behavior with the delayed element removal, styles disappearing, and then the element failing to be removed until the timeout fires. This can be solved by disabling the behavior with the REMOVE_STYLES_ON_COMPONENT_DESTROY injection token. However, that's not ideal given that it leaves all stylesheets behind.

Describe the solution you'd like

The ideal solution would be to delay the pruning of the stylesheets by the duration of the animation timeout and then prune them after. This essentially allows the animation to fire properly, leave the element looking right, and then remove. Alternatively, we could just always schedule pruning to happen a given duration after destroy.

Describe alternatives you've considered

The REMOVE_STYLES_ON_COMPONENT_DESTROY token is the only current workaround.

[thePunderWoman]

Ah, @crisbeto shared that this happens in the FW repo. I will address it there.