有什么方法可以混合 Angular Material mat-sidenav 的“推送”和“过度”模式？

Question

请在此处查看代码：https://stackblitz.com/edit/angular-sidenav-mixedpushover

我想设置一个有角度的材质 sidenav，以便它有一个始终可见的切换按钮，并在 sidenav 打开和关闭时滑动。主要内容区域在打开时（即 mode="over"）应该被按钮和 sidenav 遮挡。

基本上我希望sidenav在“over”模式下运行，但要“按下”切换它的按钮。

我尝试了几种方法，但没有一种方法完全正确。我当前的实现（不共享，因为很难做一个简单的例子）有两个切换按钮：一个位于屏幕边缘，手动显示/隐藏，另一个按钮是 sidenav 内容本身的一部分.如果你眯着眼睛，它几乎就像一个随 sidenav 滑动的按钮！我还使用了一些动画来尝试将两个按钮融合一点，但是很难匹配 sidenav 的速度。

我正在尝试做的一些图片。

Sidenav 已关闭：

Sidenav 已打开：

有人有什么可行的建议吗？谢谢！

Answer 1

如果你只是想看结果，请到答案末尾

主要要做的是将切换按钮与sidenav分离。

HTML

<p><button [ngClass]="{'button':true,'open':opened}" (click)="toggle()">Open</button></p>

<mat-sidenav-container class="sidenav" (backdropClick)="close()">
  <mat-sidenav #sidenav (keydown.escape)="close()" disableClose position="end">
    <p>Sidenav content</p>
  </mat-sidenav>

  <mat-sidenav-content>
    Page content with "over" sidenav
  </mat-sidenav-content>
</mat-sidenav-container>

在这里，您将按钮从 sidenav 中取出，这些类允许您首先将按钮放置在您想要的位置 - 使用 button 类 - 然后在打开或关闭侧导航时移动它 - 使用 @ 987654326@班级。

(backdropClick)="close()" 和 (keydown.escape)="close()" 在这里确保我们移动切换按钮，即使我们不关闭 sidenav。

所以这个样式是这样的

CSS

.button{
  position:absolute;
  width:40px;
  height:40px;
  background-color: green;
  color:black;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  top: 50%;
  right:0;
  z-index: 2;
  transform: translate3d(0,0,0);
  transition:0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.open{
  transform: translate3d(-200px,0,0);
  transition:0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

在transition 效果中，您会看到cubic-bezier(0.25, 0.8, 0.25, 1);，这是sidenav 用来显示其内容的过渡。因此，在我们的按钮中使用这个过渡，它将完美地适应 sidenav 的移动。

最后在你的打字稿文件上，你只需要切换sidenav的函数

TS

@ViewChild('sidenav') sidenav: MatSidenav;

opened: boolean = false;

toggle(){
  this.opened = !this.opened
  if(this.opened){
      this.sidenav.open();
    }else{
      this.sidenav.close();
    }
}

close() {
  this.opened = false;
  this.sidenav.close();
}

Here 你可以看到正在运行的堆栈闪电战。