16

我升级到 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 材质扩展面板，它们最初通过 [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>

4

2 回答 2

24

这是一个错误。并且有一个未解决的问题。

它是在扩展面板被包含和动画时引起的。

点击查看重现演示

迄今为止在此线程上发布的最佳解决方法：

点击查看解决方法

于 2018-12-09T11:12:05.563 回答
2

这家伙发布了一个临时的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 并将其添加到我的全局样式中。

于 2019-06-05T14:57:21.170 回答