Snackbar 样式 - Angular Material 6

Question

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

1) 正确的方式（网络示例）。当必须显示新消息时，小吃栏会完全消失，然后才会出现新消息 (https://scrud.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()，然后使用短暂的延迟在setTimeout() 中调用open()。唯一的问题是小吃店总是会有延迟，除非你能找到一种方法来避免在没有小吃店营业的情况下出现延迟。您也许可以使用 afterDismissed() 和 afterOpened() 可观察对象来做到这一点，但这似乎很棘手。

粗略的例子：

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