javascript - 弹出时将其移动到快餐栏下方，而在javascript中消失时将其移回

我想知道是否有一种方法可以在页面顶部弹出小吃栏时重新调整其标签？就像说标签位于页面的顶部，高度为10px的快餐栏在页面顶部弹出，然后我希望快餐栏成为顶部元素，并且当标签没有显示时，标签在其下方移动彼此重叠？

最佳答案

这是一个可以做你想要的事的闪电战

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>