Angular: анимация скрытого свойства - PullRequest
Новая
       51

Angular: анимация скрытого свойства

0 голосов
/ 23 апреля 2020

Это моя проблема:

Я пытался анимировать div (постепенное появление) с помощью Angular (8), он хорошо работает со свойством *ngIf, но не работает с hidden имущество. Кажется, это связано с тем, что свойство hidden не может обрабатывать анимацию. Я уже пробовал со свойством visibility, но вместо элемента оставалось пустое место. Я действительно хочу использовать hidden (или эквиваленты) вместо *ngIf, потому что я не хочу удалять и перезагружать весь элемент, когда я показываю / скрываю этот элемент.

Некоторый код для лучшего понимания моего варианта использования:

Шаблон, который не показывает анимацию, но сохраняет элемент в DOM 

<div [hidden]="hidden"
  [@showContent]>
  <!-- some content to show or hide -->
</div>

Связанный компонент 

@Component({
  ...
  animations: [trigger('showContent', [
    transition('void => *', [
      style({ opacity: 0 }),
      animate('600ms', style({ opacity: 1 })),
    ]),
  ])],
})
export class myComponent implements OnInit, OnDestroy { 
  hidden: boolean = false
  ...
}

Хорошо работает с *ngIf но удалите весь элемент из DOM (не требуется). 

<div *ngIf="!hidden"
  [@showContent]>
  <!-- some content -->
</div>

Я пытаюсь оптимизировать время загрузки, чтобы не использовать анимацию, потребляющую процессор, например max-height.

Большое спасибо за чтение этого! Любая подсказка будет приветствоваться.

...