Установка минимальной ширины mat-select-panel оставляет видимую анимацию в Angular 2+

Question

Я пытаюсь переместить панель выбора мата, чтобы она находилась ниже соответствующего выпадающего поля формы. Используя некоторый код, предоставленный в здесь , я смог это сделать. Проблема в том, что при нажатии вы можете увидеть размер изменения панели. Это поведение видно в stackblitz , предоставленном в том же вопросе и принятом ответе. До сих пор я не смог найти решение. В настоящее время моя .mat-select-панель в стилях. css выглядит так:

.mat-select-panel {
  position: absolute;
  top: 94px;
  left: 28px;
  min-width: calc(100% + 24px) !important;
  border-radius: 0px !important;
  border-top-style: none;
}

Answer 1

К материалу <mat-select> добавлен angular материал анимации прыжка, поэтому кажется, что ширина увеличивается.

Простое решение - отключить анимацию, но я не смог найти решение для отключения анимации на указанном c элементе / компоненте

Как сказано / обсуждено здесь и здесь

Чтобы отключить анимацию для отдельных элементов или компонентов материала

//TS  
isDisabled = true;

//HTML
<div [@.disabled]="isDisabled">
 <div [@childAnimation]="exp"></div>
</div>

<mat-form-field appearance="outline">
 <mat-select [@.disabled]="isDisabled" placeholder="Favorite food" disableOptionCentering>
  <mat-option *ngFor="let food of foods" [value]="food.value">
   {{food.viewValue}}
  </mat-option>
 </mat-select>
</mat-form-field>

Но, к сожалению, это не работает для <mat-select>

Чтобы отключить анимацию для компонента

export class YourComponent {
 @HostBinding('@.disabled')
 public animationsDisabled = true;
}

Это также не работает.

Что работает?

Отключение анимации для наложения материала cdk (включая все компоненты материала) из компонента

import { Component, Renderer2 } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';
...
overlayContainerElement: HTMLElement
constructor( private overlayContainer:OverlayContainer, private renderer:Renderer2) {
    this.overlayContainerElement = this.overlayContainer.getContainerElement();
    //To disable pass true as third argument
    this.renderer.setProperty( this.overlayContainerElement, "@.disabled", true );
}

Примечание: Код выше отключает анимацию для всего приложения, если вы хотите отключить анимацию для вашего указанного c компонента, просто добавьте приведенный выше код в Ваш компонент и добавьте приведенный ниже код для повторного включения анимации.

ngOnDestroy() {
 this.renderer.setProperty( this.overlayContainerElement, "@.disabled", false );
}

Чтобы отключить анимацию для всего приложения

Вы можете добавить вышеуказанный код в основной компонент (т.е. , app.component.ts) или
Заменить BrowserAnimationsModule на NoopAnimationsModule in app.module.ts

import { NoopAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
  imports:      [ NoopAnimationsModule ],
  declarations: [ ... ],
  bootstrap:    [ ... ]
})

Рабочий пример (анимация отключена для компонента) .