Снежинки - Angular материал 6 - angular, angular-material, angular6

avechuche спросил: 12 мая 2018 в 03:42 в: angular

Я использую 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;
}

Faisal ответил: 12 мая 2018 в 03:47

Пожалуйста, поделитесь своим кодом шаблона, где вы добавили закусочную

Rohit.007 ответил: 12 мая 2018 в 03:51

Попробуйте добавить paneClass свойство snakebar. "Дополнительные классы CSS добавляются в контейнер для закусочных". и вы можете добавить маржу в этот класс

avechuche ответил: 12 мая 2018 в 03:56

@Faisal Привет и THX! перейти к обновленному вопросу, Примерный раздел

1 ответ

G. Tranter ответил: 12 мая 2018 в 07:11

Angular материал создает эффект скольжения, оживляя преобразование translateY. Я не думаю, что есть способ обойти перекрытие. То, что вы могли бы попробовать, - это заранее называть dismiss(), а затем вызвать open() в setTimeout() с помощью короткой задержки. Единственная проблема заключается в том, что в закусочной всегда будет такая задержка, если вы не найдете способ избежать задержки, если нет закуски. Возможно, вы сможете использовать наблюдаемые символы afterDismissed() и afterOpened(), но это кажется сложным.

Пример:

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