Почему анимация не работает после загрузки страницы - PullRequest
Новая
       24

Почему анимация не работает после загрузки страницы

0 голосов
/ 05 февраля 2019

Я пытаюсь сделать свертывающуюся анимацию при загрузке страницы.

Проблема: блок div уже развернут (показать) после загрузки страницы без анимации.

Блок Div должен быть расширен с анимацией.

Я нашел обходной путь с помощью ViewChild и подписался на элемент div с ngFor изменениями, а затем установил класс 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);
            });
}
...