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

Question

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

下面是一个例子

是否有可能与离子框架ion-side-menu做到这一点？如果是这样，怎么样？

谢谢。

Answer 1

我相信这不是Ionic的标准，但如果你看看$ionicModal，你可以看到他们在那里使用相同的技术。

如果你看看他们使用此选项的CSS，你应该添加下列到正确的类：

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有条件适用等级：

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

这个工作，并使页面内容部分tra当侧面菜单被打开时，这是不可用的。

Answer 3

你只需要CSS就可以了。

当侧面菜单打开时，有一个CSS类菜单打开添加到正文标签。

所以，只需添加以下内容即可获得您想要的内容。

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> 

有了这个，你将和谷歌有相同的效果！