打开侧边菜单时的灰页内容答案

【问题标题】：Grey page content when side menu is opened打开侧边菜单时的灰页内容
【发布时间】：2015-08-20 00:29:36
【问题描述】：

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

这是一个例子

是否可以在离子框架中使用ion-side-menu 执行此操作？如果有，怎么做？

谢谢。

【问题讨论】：

标签： html menu ionic-framework ionic hamburger-menu

【解决方案1】：

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

有了这个你就会有和谷歌一样的效果了！

【讨论】：

【解决方案2】：

你只需要 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;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

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

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

【讨论】：

谢谢，它帮助我们找到了解决方案。