角度4材质对话框平滑过渡

Question

是否有任何方法可以根据内部内容使材质对话框的高度和宽度从一种尺寸转换为另一种尺寸？

我曾尝试在内容中添加动画，内容平滑过渡，但模态仍未正常过渡。我想模态地根据内容顺利地改变宽度/高度。

我想要的：模态对话框的高度/宽度根据里面的内容保持平滑。例如，当内容很大并且我切换到较小的内容时，我希望对话框平滑过渡到新的大小。

我使用updateSize（）来更新对话框的大小，但仍然没有转换。

Answer 1

截至目前，目前还没有自定义对话框打开/关闭动画的功能。

但是，自定义对话框打开/关闭动画存在问题。有关详细信息，请参阅issue 8857。

Answer 2

我在mat-tab-group内使用MaterialDialog。如果两个选项卡的高度不同，则从一个选项卡切换到另一选项卡的高度将非常烦人。

我能避免这些突然跳跃的烦恼的最接近方法就是防止Dialog调整自身大小。如果为用作mat-dialog-content的元素赋予明确的高度，则无论内容是否完美适合，它都会始终保持该高度。不过，它必须是一个明确的大小，所以没有auto或100%这样的东西。

默认情况下，max-height的{​​{1}}设置为mat-dialog-content。

因此，您可以将65vh设置为height，整个对话框不应再缩小或增长。

类似这样的事情。 （或通过使用类和外部CSS）。

65vh

我希望可以做一些事情以实现平滑的高度过渡。在CSS中添加<div mat-dialog-content style="height: 65vh"></div> 属性没有帮助，因为高度不是显式的，而是从所包含的transition的必要高度中获取的，因此它会从一种尺寸跳到另一种尺寸。 / p>

Answer 3

我遇到了一个类似的问题，发现材质对话框API可以使用具有名为panelClass的设置的自定义css类。然后，我们可以使用该自定义CSS类定义过渡。

// ts
this.dialog.open(MyDialogComponent, {
  width: "45vw",
  height: "42vh",
  maxWidth: "100vw",
  maxHeight: "100vh",
  panelClass: "mat-dialog-height-transition"
});

// css class
.mat-dialog-height-transition {
  transition: height 0.5s;
}

现在，当您更新组件内部对话框的高度时，对话框将随着过渡而调整大小

export class MyDialogComponent {
...
constructor(public dialogRef: MatDialogRef<MyDialogComponent>) {}
...
someStateChanged(isEnlargeDialog: boolean) {
  this.dialogRef.updateSize("45vw", isEnlargeDialog ? "80vh" : "42vh");
}