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

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>

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