打开侧边菜单时，页面内容为灰色

If you look at all the Google apps when you open the side (hamburger) menu the content of the app is greyed.

如果你在打开侧边(汉堡包)菜单时查看所有的谷歌应用程序，程序的内容是灰色的。

Here is an example

这是一个例子

Is it possible to do this with ion-side-menu in ionic framework? If so, how?

有可能在离子框架中使用离子侧菜单吗?如果是这样,如何?

Thank you.

谢谢你！

4 个解决方案

#1

I believe this is not standard available in Ionic, but if you look at the $ionicModal you can see they do use the same technique there.

我认为这不是离子的标准，但是如果你看看$ionicModal你会发现他们使用了同样的技术。

If you look at the CSS they use for this option, you should add the following to the correct class:

如果您查看他们为这个选项使用的CSS，您应该将以下内容添加到正确的类中:

opacity: .5;
transition: opacity 300ms ease-in-out;
background-color: #000;

You should somehow detect when the side menu is exposed and then apply above CSS to the <ion-nav-view>.

您应该以某种方式检测边菜单何时被公开，然后将上面的CSS应用到 。

I think you could create a directive or so which watches the $ionicSideMenuDelegate.isOpen() function and based on result apply or remove the CSS.

我认为您可以创建一个指令来监视$ionicSideMenuDelegate.isOpen()函数，并基于结果应用或删除CSS。

#2

Based on Mark Veenstra's answer, here is the result I came with.

根据Mark Veenstra的答案，这是我得到的结果。

In CSS:

在CSS中:

.opaque-content {
   opacity: .5;
   transition: opacity 300ms ease-in-out;
}

In the controller I'm watching the open ratio of the side menu and set a flag:

在控制器中，我观察侧边菜单的打开比例，并设置一个标志:

$scope.$watch(
   function () {
      return $ionicSideMenuDelegate.getOpenRatio();
   },
   function (ratio) {
      $scope.sidemenuopened = (ratio == 1);
   });

In the template I'm using ng-class to conditionally apply the class:

在模板中，我使用ng-class有条件地应用类:

<ion-side-menus>
   <ion-side-menu-content ng-class="{'opaque-content' : sidemenuopened}">
      <ion-nav-bar>
      </ion-nav-bar>

   </ion-side-menu-content>
</ion-side-menus>

This works and makes the page content partially transparent when the side menu is opened.

当侧边菜单打开时，这将使页面内容部分透明。

#3

You only need CSS for this.

你只需要CSS。

When the side menu is opened, there is a CSS class menu-open added to the body tag.

当侧边菜单被打开时，有一个CSS类菜单-open添加到body标签中。

So just add the following and you will get what you want.

所以只要加上以下内容，你就会得到你想要的。

body.menu-open ion-side-menu-content {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    opacity: 0.5;
}

#4

Based on Marius Bancila's answer, here is my solution.

根据马吕斯·班西拉的回答，这就是我的解决办法。

In CSS: nothing

在CSS:没有

In the controller I'm watching the open ratio of the side menu and set a flag:

在控制器中，我观察侧边菜单的打开比例，并设置一个标志:

$scope.$watch(
   function () {
      return $ionicSideMenuDelegate.getOpenRatio();
   },
   function (ratio) {
      $scope.sidemenuopened = (ratio == 1);
   });

In the template I used modal backdrop background class instead of your opaque-content which isn't gray at all:

在模板中，我使用了模态背景类，而不是完全不灰色的不透明内容:

<ion-side-menus>
   <ion-side-menu-content>
      <div ng-class="{'modal-backdrop-bg' : sidemenuopened}"></div>
      <ion-nav-bar>
      </ion-nav-bar>

   </ion-side-menu-content>
</ion-side-menus>

With this you will have the same effect as Google!

有了这个，你将得到与谷歌相同的效果!