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

Question

如果您在打开侧面（汉堡包）菜单时查看所有 Google 个应用程序，应用程序的内容是灰色的。

这是一个例子

是否可以在离子框架中用 ion-side-menu 做到这一点？如果可以，怎么做？

谢谢。

Answer 1

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

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

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

您应该以某种方式检测侧边菜单何时显示，然后将 CSS 以上应用到 <ion-nav-view>。

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

Answer 2

根据 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 有条件地应用 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 3

为此你只需要 CSS。

当侧边菜单打开时，CSS class menu-open 添加到 body 标签。

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

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

在模板中，我使用模态背景背景 class 而不是你的不透明内容，它根本不是灰色的：

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

有了这个你会得到和Google一样的效果！

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

Grey page content when side menu is opened

html

menu

ionic-framework

ionic

hamburger-menu