Угловое мерцание панели расширения материала 7

Question

я обновлен до 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"

Я использую Панели расширения угловых материалов, которые изначально расширяются ложно через [extended] = "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>

Answer 1

Этот парень опубликовал временную работу с 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 и добавил его в свои глобальные стили.

Answer 2

Это ошибка.для него существует открытый выпуск .

Вызывается, когда панель расширения содержит и анимируется .

Нажмите, чтобы увидетьвоспроизвести демо