角度：动画隐藏属性

Question

那是我的问题：

我尝试使用Angular（8）为div（淡入）设置动画，它可以与*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这样的占用CPU资源的动画。

非常感谢您阅读本文！任何线索都将受到欢迎。