为什么页面加载后动画不起作用

Question

页面加载后，我正在尝试制作折叠动画。

问题：页面加载后没有任何动画， div块已被展开（显示）。

Div块应添加动画。

我想出了使用 ViewChild 的解决方法，并通过 ngFor 更改订阅了div元素，然后设置了CSS类，从而启动了动画

<div [id]="item.id" #items *ngFor="let item of items">
   <div class="details collapse" [ngClass]="{'show': item.isFocused}">
         <div class="card-body" *ngIf="item.isFocused">
               ...
         </div>
    </div>
</div>

CSS动画：

.collapse {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;

  &.show {
      max-height: 12em;
     transition: max-height 0.5s ease-in-out;
  }
}

来自组件代码的片段：

@ViewChildren("items") htmlItems: QueryList<any>;
items: Item[];

ngOnInit() {
  this.itemsService.getItems()
            .subscribe(
                (items_: Item[]) => this.items = items_;)
}

ngAfterViewInit() {
   // current workaround
   this.htmlItems.changes.pipe(
            take(1)
            ).subscribe(() => {
              const focusedItemId = this.activatedRoute.snapshot.queryParams.itemId;
              const focusedItem = this.items.find(item => item.id === focusedItemId);
              setTimeout(() => focusedItem.isFocused = true, 0);
            });
}