Angular: анимация пользовательского состояния не работает должным образом

У меня есть два div (родительский и дочерний), и я хочу сделать специальную анимацию на основе настраиваемого состояния (close => open && open => close):

• когда состояние идет от закрытого => открытого:
  Я хочу, чтобы непрозрачность родительского div изменилась от 0 до 1, а дочерняя по шкале от 0,3 до 1.
• когда состояние переходит из открытого => закрытого:
  Я хочу, чтобы атрибуты css вернулись к своим исходным значениям (непрозрачность 0 для родительского элемента и масштаб (0,3) для дочернего элемента)
  

Хорошей новостью является то, что анимация работает должным образом (для обоих div), когда состояние равно => close => open.

Плохая новость заключается в том, что анимация не работает (только для дочернего div), когда состояние меняется с open => close.

Хватит говорить, вот что я сделал:

Просмотр HTML:

<div [@openClose] = "opened ? 'open' : 'close'" class = "parent">
    <div [@animateChild] = "opened ? 'open' : 'close'" class = "child">
     <p>Child content</p>
    </div>
</div>

В компоненте.ts:

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  animations: [
    trigger('openClose', [
        state('open', style({
           opacity: 1,
           visibility: 'visible',
        })),
        // when we go from close to open do these steps
        transition('close => open', [
          query(':self', [// animate div itself
              animate('200ms ease-in', style({
                opacity: 1,
                visibility: 'visible',
              }))
          ]),
          query('@animateChild', animateChild())// then animate children (.child)
        ]),

        transition('open => close', [
          query(':self', animate('200ms ease-in')),
          query('@animateChild', animateChild()),
        ]),
    ]),
    trigger('animateChild', [
       state('open', style({ opacity: 1, transform: 'scale(1)' })),
       transition('close => open', [
         animate('100ms ease-out')
       ]),

       transition('open => close', [
         style({ transform: 'scale(0.3)', opacity: 0 }),
         animate('100ms ease-out')
       ])
    ])
  ]
})
export class MyComponent implements OnInit {
  opened: boolean;
  constructor() { }

  ngOnInit() {}

  open(){
    this.opened = true;
  }

  close(){
    this.opened = false;
  }
}

В файле CSS:

.parent{
  width: 100%;
  height: 100vh;
  background: black;
  opacity: 0;/* initialize opacity to 0 for the parent */
}
.child{
   width: 50%;
   background: white;
   transform: scale(0.3);/* initialize scale to 0.3 for the child */
   opacity: 0; /* and opacity to 0 to be invisible when component initialized */
}

Это пример на Stackblitz:
https://stackblitz.com/edit/angular-bjuzyr

Что я здесь сделал не так?