angular - Snackbar 样式 - Angular Material 6

Question

我正在使用 Angular 6 和 Material 6，我需要将margin-bottom: 20px设置为小吃吧。我遇到的问题是当一个关闭而另一个打开时动画重叠。我该如何解决？

1）正确的方式（网络示例）。当必须显示新消息时，小吃栏会完全消失，然后才会出现新消息（https://scud.herokuapp.com/book）

2）我的代码（坏）

示例：转到官方小吃店示例（https://stackblitz.com/angular/qyllrqbvykv?file=styles.css）。转到“style.css”并添加这段代码并多次单击按钮。

.cdk-overlay-pane {
  margin-bottom: 10px !important;
}

Answer 1

Angular Material 通过为 translateY 变换设置动画来产生滑动效果。我认为没有任何方法可以绕过重叠。您可以尝试的是故意先调用，dismiss()然后使用短暂的延迟调用。唯一的问题是小吃店总是会有延迟，除非你能找到一种方法来避免在没有小吃店营业的情况下出现延迟。您也许可以使用and observables 来做到这一点，但这似乎很棘手。open()setTimeout()afterDismissed()afterOpened()

粗略的例子：

openSnackBar(message: string, action: string) {
  this.snackBar.dismiss();
  setTimeout(() =>
    this.snackBar.open(message, action, {
      duration: 2000,
    }), 500
  );
}