蛇条风格.角质材料6

Question

我使用的是角度6和材料6，我需要设置边距-底部:20‘m为一个小吃栏。我的问题是，当一个被关闭，另一个被打开时，动画重叠。我该怎么解决呢？

1)正确的方法(网络实例)。当必须显示新消息时，snackbar会在出现新消息之前完全消失(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

角材料通过动画translateY变换产生滑动效果。我不认为有什么办法可以绕开重叠。您可以尝试的是首先故意调用dismiss()，然后使用短时间延迟在setTimeout()中调用open()。唯一的问题是，snackbar总是有这个延迟，除非您能够找到避免延迟的方法，如果没有snackbar打开。您可能可以使用afterDismissed()和afterOpened()可观察到的工具来完成这一任务，但这似乎很棘手。

粗略的例子：

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