那是我的问题:
我尝试使用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资源的动画。
非常感谢您阅读本文!任何线索都将受到欢迎。