angular - Mat 扩展面板扩展到其他 html 元素

Question

我有一个垫子扩展面板，我想将它延伸到它下面的元素上，而不是简单地向下移动那个元素。我尝试调整 mat-expansion 元素的 z-index 但这不起作用。我在 angular material docs/github 中没有看到任何表明可以做到这一点的东西。有没有人这样做或知道如何做到这一点？

任何帮助/提示/建议将不胜感激。

更新： 我想要的解决方案应该与此类似。它可以包含几个元素（垫选择、日期选择器等）

Answer 1

非常感谢@wixFitz 让我朝着正确的方向前进，但这是最终产品。

动画.html：

      <div class="report-filter">
    <button 
      mat-raised-button 
      class="filter-button"
      type="button"
      (click)="showDiv()"
      [ngClass]="{'menu-button-active': filterActive}">
      {{ 'TOOLTIP.filter' | translate }}
      <mat-icon>filter_list</mat-icon>
    </button>
    <div [@divState]="divState" class="menu mat-elevation-z8">
      <button
        class="center"
        mat-button
        (click)="closeMe()"
        mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>
      <div class="search-brands">
        <mat-form-field>
          <mat-select placeholder="Brands" [(value)]="selectedBrand" panelClass="brandSelectDropdown">
            <mat-option (click)="resetBrand()" value="">none</mat-option>
            <mat-option *ngFor="let brand of brands" (click)="setBrand(brand.brand)" value="brand.brand">{{ brand.brand }}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </div>
  </div>

动画.scss：

.report-filter {
 display: flex;
 .filter-button {
 margin: 1rem 0;
}

}

.menu {
 position: absolute;
 top: 248px;
 right: 23px;
 background-color: $grey600;
 border: 1px solid gray;
 border-radius: 4px;
 z-index: 2;
 .search-brands {
  margin: 2rem 1rem;
  border: 1px solid black;
  background-color: $grey300;
  mat-form-field {
   width: 95%;
   margin: 0rem .5rem;
  }
}
button {
 mat-icon {
  color: white;
  margin: 0 0 0 0;
  }
 }
}
.menu-button-active {
 background-color: $grey600;
 color: white;
}

animation.ts： 在@Component 对象中

  animations: [
   trigger('divState', [
    state('show', style({ height: '100vh', width: '20vw' })),
    state('hide', style({ height: '0vh', display: 'none'})),
    transition('show => hide', animate('200ms ease-out')),
    transition('hide => show', animate('300ms ease-in'))
   ])
  ]

全局变量

  divState: string = "hide";

打开和关闭功能

  showDiv(){
   this.divState = (this.divState == 'hide') ? 'show' : 'hide';
   this.filterActive = !this.filterActive
   this.getBrands();
  }

  closeMe(){
   this.divState = 'hide';
   this.filterActive = !this.filterActive
  }