Закусочные стили - угловой материал 6

Question

Я использую Angular 6 и Material 6, и мне нужно установить margin-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(), а затем набрать open() через setTimeout(), используя небольшую задержку.Единственная проблема заключается в том, что закусочная всегда будет иметь такую ​​задержку, если вы не можете найти способ избежать задержки, если никакая закусочная не открыта.Возможно, вы сможете использовать наблюдаемые значения afterDismissed() и afterOpened(), но это кажется хитрым.

Грубый пример:

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