当它弹出时移动小吃栏下方的标签，当它在javascript中消失时将它们移回答案

【问题标题】：move tabs underneath snackbar when it pops up and move them back when it is gone in javascript当它弹出时移动小吃栏下方的标签，当它在javascript中消失时将它们移回
【发布时间】：2020-04-10 05:24:43
【问题描述】：

我想知道当快餐栏弹出页面顶部时，是否有办法重新调整其下方的标签？就像假设标签位于页面的最顶部一样，高度为 10px 的小吃栏会在页面顶部弹出，然后我希望小吃栏成为顶部元素，并且标签在没有它们的情况下移动到其下方互相重叠？

【问题讨论】：

你想用小吃店做什么？例如。当用户按下按钮“A”时，我想让用户知道进程“b”已经启动。一般来说，snackbar 应该位于页面底部，当snackbar 进入视图时，您不应该为其他组件设置动画。
我了解快餐栏位于页面底部，但对于此特定任务，快餐栏应位于页面顶部。话虽这么说，在这个任务中我想听特定的事件，如果是真的，我希望小吃栏弹出并移动它们下面的选项卡。我准备好了活动部分，只需要知道如何移动小吃栏下方的标签

标签： javascript html css tabs snackbar

【解决方案1】：

这是一个堆栈闪电战，可能会做你想做的事

https://stackblitz.com/edit/angular-f9k7ev

基本上，我正在做的是触发一些代码（按钮、事件等）来设置我的快餐栏打开顶部，并向我们的容器（这里是一个 div，为你，你的标签）添加一个类来移动使用 CSS 将它们降低任意值（这里我们使用 10em）。我们还听我们的 afterDismissed() 订阅返回然后删除该类。

 constructor(private _snackBar: MatSnackBar) {}

 openSnackBar() {
      const ourSnackbar = this._snackBar.openFromComponent(PizzaPartyComponent, {
           duration: this.durationInSeconds * 1000,
           verticalPosition: 'top'
      });

      ourSnackbar.afterDismissed().subscribe(() => this.removeOurClass());

      let elements = document.getElementsByTagName("div");
      Array.from(elements).forEach(element => {
           element.classList.add('moved');
      });
 }

 removeOurClass() {
      let elements = document.getElementsByTagName("div");

      Array.from(elements).forEach(element => {
           element.classList.remove('moved');
      });
 }

和我们的 CSS

.moved {
    margin-top: 10em;
}

以及我们要移动的 HTML（不是小吃栏），我们要查找的 div。

<div class="mat-app-background basic-container">
    <snack-bar-component-example>loading</snack-bar-component-example>
</div>

【讨论】：