[英]Angular 7 Material Expansion Panel flicker
我升级到 Angular 7.1.0:
"@angular/animations": "^7.1.0",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/material": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0"
我正在使用 Angular Material Expansion Panels,最初通过 [expanded]="false" 将其扩展为 false。
扩展面板的主体在几毫秒内可见。 从扩展到不扩展看起来像是一个短暂的跳跃。 有没有人有同样的问题?
<mat-expansion-panel-header>
<mat-panel-title>
<div class="NumberAccordionContentWrapper__centered">
<h2 [class.NumberAccordion__notExpanded]="!isExpanded">{{ headline }}</h2>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="NumberAccordionContentWrapper__centered">
<ng-template tbHost></ng-template>
</div>
这家伙用 css 发布了一个临时工作,这似乎有效: https : //github.com/angular/components/issues/11765#issuecomment-447991348
::ng-deep .ng-animating div mat-accordion mat-expansion-panel mat-expansion-panel-header {
height: 48px;
}
::ng-deep .ng-animating div mat-accordion mat-expansion-panel div.mat-expansion-panel-content {
height: 0px;
visibility: hidden;
}
我离开了 ::ng-deep 并将其添加到我的全局样式中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.