Snackbar样式 - Angular Material 6

Question

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

1）正确的方式（网络示例）。当必须显示新消息时，快餐栏会在出现新消息之前完全消失 （https://scrud.herokuapp.com/book）

2）我的代码（不好）

示例：转到官方零食店示例（https://stackblitz.com/angular/qyllrqbvykv?file=styles.css）。转到＆＃34; style.css＆＃34;并添加这段代码并点击按钮上的很多时间。

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

Answer 1

Angular Material通过设置translateY变换的动画来产生滑动效果。我认为没有办法解决重叠问题。您可以尝试的是先故意拨打dismiss()，然后使用短暂延迟在open()中拨打setTimeout()。唯一的问题是，小吃店将始终有延迟，除非你能找到一种方法来避免延迟，如果没有小吃店打开。您可以使用afterDismissed()和afterOpened()可观察对象来做到这一点，但这看起来很棘手。

原油示例：

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