首页 文章

Snackbar样式 - Angular Material 6

提问于
浏览 次
0

我正在使用Angular 6和Material 6，我需要将 margin-bottom: 20px 设置为小吃吧 . 我遇到的问题是，当一个关闭而另一个打开时，动画会重叠 . 我怎么解决这个问题？

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

2）我的代码（坏）

enter image description here

Example: 转到官方零食店示例（https://stackblitz.com/angular/qyllrqbvykv?file=styles.css） . 转到"style.css"并添加这段代码，然后单击许多时间按钮 .

.cdk-overlay-pane {
  margin-bottom: 10px !important;
}
angular angular-material angular6 angular-material-5

1 回答

  • 0

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

    原油示例：

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

相关问题