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

时间:2015-06-05 06:45:18

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

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

这是一个例子

enter image description here

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

谢谢。

4 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:3)

我认为这不是Ionic的标准版,但如果你看$ionicModal,你可以看到它们在那里使用相同的技术。

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

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

你应该以某种方式检测侧面菜单何时暴露,然后将CSS应用于<ion-nav-view>

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

答案 2 :(得分:2)

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

答案 3 :(得分:0)

根据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相同的效果!