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

Question

如果您在打开侧面（汉堡包）菜单时查看所有Google应用，则应用内容会显示为灰色。

这是一个例子

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

谢谢。

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。

打开侧边菜单时，会在正文标记中添加一个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>

通过此操作，您将获得与Google相同的效果！