web-dev-qa-db-ja.com

Angular 7マテリアル拡張パネルのちらつき

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>
angularangular-materialangular7angular-material-7
8
Philip Schikora

これはバグです。 未解決の問題 があります。

これは、拡張パネルが含まれ、アニメーション化されている場合に発生します。

クリックしてデモを再現

このスレッドに投稿されたこれまでの最良の回避策：

クリックして回避策を確認してください

8
Stavm

この男は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を省略して、グローバルスタイルに追加しました。

1
Martin Cremer