Question

我很想提供我想要完成的截图，但是它的专有设计并不能，所以我会尽力描述我想要的东西。

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

let coordSet = Array.from(new Set(coords));

// search the uniqueCoords list
let exists   = uniqueCoords.find(function (itemCoord, idx, arr) {

    // only check on every other coord
    //   if the previous coord being looped over matches the first coord in the coord set
    //   if the current coord being looped over matches the second coord in the coord set
    //   return true indicating the coord-set exists
    if ((idx % 2) === 1) && (arr[idx -1] === coordSet[0]) && (itemCoord === coordSet[1])  {
        return true;
    }
});

// if a matching coord-set wasn't found, push the new set
if (!exists) {
    // called with apply so each item in coordSet
    // is appended to the uniqueCoords Array
    uniqueCoords.push.apply(uniqueCoords, coordSet);
}

HTML：

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

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

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

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

1 个答案: