html - Grey page content when side menu is opened

Question

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.

Answer 1

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

在 CSS 中：

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

在控制器中，我正在查看侧面菜单的打开率并设置一个标志：

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

在我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>

这可以在打开侧边菜单时使页面内容部分透明。

Answer 2

我相信这不是 Ionic 中可用的标准，但如果你看一下，$ionicModal你会发现他们确实使用了相同的技术。

如果您查看他们用于此选项的 CSS，您应该将以下内容添加到正确的类中：

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

您应该以某种方式检测侧边菜单何时暴露，然后将上面的 CSS 应用于<ion-nav-view>.

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

Answer 3

为此，您只需要 CSS。

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

因此，只需添加以下内容，您就会得到您想要的。

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

Answer 4

根据 Marius Bancila 的回答，这是我的解决方案。

在 CSS 中：nothing

在控制器中，我正在查看侧面菜单的打开率并设置一个标志：

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

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

<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>

有了这个，你将拥有和谷歌一样的效果！