Css 角度2如何在幻灯片中淡入页面的其余部分

我很想提供一个我想要完成的截图，但它的专有设计和不能，所以我会尽我所能描述我想要的

我提前道歉，因为我不是最流利的前端开发人员，但我每天都在学习新东西。当用户单击一个按钮时，我的页面上有一个幻灯片，该按钮还执行角度2动画： 打字稿：

animations: [
 trigger('slide', [
  state('true', style({
    transform: 'translate3d(0, 0, 0)'
  })),
  state('false', style({
    transform: 'translate3d(100%, 0, 0)'
  })),
  transition('1 => 0', animate('400ms ease-in-out')),
  transition('0 => 1', animate('400ms ease-in-out'))
 ]),
]
....
 openBucket(nb) {
   this.bucketState = true;
   nb.openBucket(this.bucketState);
 }

HTML:

。。。。
...

---

所以在打开之前，页面看起来很正常，但是在滑入之后，我希望左侧覆盖一层半透明的蓝色，与滑块齐平。这是怎么做到的？谢谢

你可能需要一个所谓的纱窗。它具有全屏大小，不透明度设置小于1，如0.6。它可以有特定的背景色（在您的情况下为蓝色）。当幻灯片打开时，您可以显示它

大概是这样的：

HTML:

<div @someAnimation class="veil" *ngIf="bucketState"></div>

 .veil{
       position: fixed;
       top: 0;
       left: 0;
       overflow: hidden;
       height:100vh;
       width:100vw;
       backgound-color: blue;
       opacity:0;
       z-index: 2 // should be more than the rest of the screen but less than the slide
    }

 trigger('someAnimation', [
        transition(':enter', [
            style({ opacity: 0 }),
            animate('900ms ease-in', style({ opacity: 1 }))
        ]),
        transition(':leave', [
            style({ opacity: 1 }),
            animate('900ms ease-in', style({ opacity: 0 }))
        ])
    ]);

动画：

<div @someAnimation class="veil" *ngIf="bucketState"></div>

 .veil{
       position: fixed;
       top: 0;
       left: 0;
       overflow: hidden;
       height:100vh;
       width:100vw;
       backgound-color: blue;
       opacity:0;
       z-index: 2 // should be more than the rest of the screen but less than the slide
    }

 trigger('someAnimation', [
        transition(':enter', [
            style({ opacity: 0 }),
            animate('900ms ease-in', style({ opacity: 1 }))
        ]),
        transition(':leave', [
            style({ opacity: 1 }),
            animate('900ms ease-in', style({ opacity: 0 }))
        ])
    ]);

---

谢谢你。看起来面纱将内容推到了页面上，而不是覆盖在上面。你知道这是为什么吗？我可以用位置：fixed；排名：0；右：0；底部：0；左：0；非常感谢。