🐞 bug report

Affected Package

This issue relates to the @angular/animations package.

Is this a regression?

I'm not sure.

Description

When I try to run parent and child animations at the same time with group() and animateChild(), the child animation doesn't always animate smoothly.

The same child animation works correctly when it is used by itself.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-ih4qhl

Instructions to reproduce with reproduction demo:

1. Click the heading "Click me to expand & collapse the content below" to expand the section below the heading.
2. Click the heading again to collapse the section below.

After step 1 you see the colour of the whole section, including the title, change to grey and once that finishes the body text below the title expands suddenly. This is the bug, because the child's height animation is not running smoothly, in parallel with the parent animation.

After step 2 you see the body text collapse and the colour change back to white, both gradually and at the same time.

What I would expect to happen is that in both cases, both the animations run smoothly, in parallel.

🔥 Exception or Error

There appears to be no error when this happens.

🌍 Your Environment

Node: 10.16.2
NPM: 6.9.0

Angular Version:

@angular/animations: 8.1.2
@angular/cdk: 8.1.1
@angular/common: 8.1.2
@angular/compiler: 8.1.2
@angular/core: 8.1.2
@angular/forms: 8.1.2
@angular/platform-browser: 8.1.2
@angular/platform-browser-dynamic: 8.1.2
@angular/router: 8.1.2

It also happens in 8.2.2 in the stackblitz that is linked above.

Anything else relevant?
I have seen this in my app in Chrome and Edge. It doesn't seem to be browser specific.