angular animations, не рендерится компонент

У меня есть такой компонент:
open-close.component.html:

<form id="form" [formGroup]="form">
  <input type="text" class="form-control" formControlName="list_text">
  <div class="form-group">
    <input type="button" class="btn btn-primary" value="Добавить" (click)="addItem()">
    <input type="button" class="btn btn-danger" value="Удалить" (click)="removeItem()">
  </div>

</form>

<div class="list__container" [@itemAnimation]="items.length">
  <div class="list__title">
    Items:
  </div>
  <div
    class="list__item"
    *ngFor="let item of items"
  >
    {{ item }}
  </div>
</div>

open-close.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { itemAnimation } from './open-close.animation';

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.scss'],
  animations: [
    itemAnimation
  ]
})
export class OpenCloseComponent implements OnInit {

  constructor() { }

  form: FormGroup = new FormGroup({
    list_text: new FormControl('This is America')
  });
  number = 10;
  items: string[];

  modifyNumber(n: number): void {
    this.number += n;
  }

  ngOnInit(): void {

    if (localStorage.getItem('items')) {
      this.items = JSON.parse(localStorage.getItem('items'));
    } else {
      this.items = ['Первая запись'];
      this.setLocaleStorage();
    }

  }

  addItem(): void {
    this.items.push(this.form.value.list_text);
    this.setLocaleStorage();
  }

  removeItem(): void {
    this.items.pop();
    this.setLocaleStorage();
  }

  setLocaleStorage(): void {
    localStorage.setItem('items', JSON.stringify(this.items));
  }

}

И самое основное, сама анимация open-close.animation.ts:

import {
  trigger,
  transition,
  style,
  query,
  group,
  animateChild,
  animate,
  keyframes,
  stagger,
} from '@angular/animations';

export const itemAnimation = trigger('itemAnimation', [
  transition('* => *', [
    query(
      ':enter', style({ opacity: 0 }), { optional: true }
    ),
    query(
      ':enter', stagger('0.3s', [
        animate('1s ease-in', keyframes([
            style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
            style({ opacity: 0.5, transform: 'translateY(50%)', offset: 0.3 }),
            style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
        ])),
      ]), {optional: true}
    )
  ]),
]);

Если я заккоментирую код вот так, то всё работает(кроме анимации). Подскажите, что не так?

import {
  trigger,
  transition,
  style,
  query,
  group,
  animateChild,
  animate,
  keyframes,
  stagger,
} from '@angular/animations';

export const itemAnimation = trigger('itemAnimation', [
  transition('* => *', [
    query(
      ':enter', style({ opacity: 0 }), { optional: true }
    ),
    // query(
    //   ':enter', stagger('0.3s', [
    //     animate('1s ease-in', keyframes([
    //         style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
    //         style({ opacity: 0.5, transform: 'translateY(50%)', offset: 0.3 }),
    //         style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
    //     ])),
    //   ]), {optional: true}
    // )
  ]),
]);