css - Angular 2如何在幻灯片中淡化页面的其余部分

Question

我很乐意提供我想要完成的内容的屏幕截图，但它的专有设计并不能，所以我会尽力描述我想要的内容。

我提前道歉，因为我不是最流利的前端开发人员，但每天都在学习新事物。当用户单击一个也执行 Angular 2 动画的按钮时，我的页面上有一个幻灯片: typescript :

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:

....
<div class="review-button" (click)="openBucket(nb)"></div>
<new-bucket #nb [@slide]="bucketState"></new-bucket>
...

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

Answer 1

您可能需要面纱。它具有全屏尺寸并且不透明度设置小于 1，例如 0.6。它可以具有特定的背景颜色(在您的情况下为蓝色)。当幻灯片打开时显示它。

像这样:

HTML:

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

CSS:

 .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 }))
        ])
    ]);