html - 切换垫 slider 的显示时如何防止内容在屏幕上跳跃

Question

如果我将鼠标悬停在音量图标上，它会添加一个垫子 slider

这会压低整个内容，我该如何防止这种情况发生？

在此Stackblitz example中可重现

<div>Hover on below icon to see jumping</div>

<span class="volume-controls"
          (mouseover)="showVolSlider = true"
          (mouseleave)="showVolSlider = false">

      <button mat-icon-button
              (click)="toggleMute()">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT34nN7TXRgBVDzlAXnsLNkKK-oxUSRDgfV0RXrudKTH8ivIUcQ" style="height: 20px">
      </button>

      <span class="slider-wrapper" [hidden]="!showVolSlider">
        <mat-slider></mat-slider>
      </span>

</span>

Answer 1

您只需添加到您的 SASS 文件

.mat-icon-button{
    padding-top:8px;
  }

默认情况下，音量在顶部填充上增加 8px。避免重新对齐的镜像

.volume-controls {
    .mat-icon-button{
        padding-top:8px;
      }
...

关于你的第二个问题，你所要做的就是固定容器的大小。我想这将是更简单的方法:

  .volume-controls {
    display:block;
    height:55px;
    max-height:55px !important;

Stackblitz Demo