打開側邊菜單時的灰色頁面內容

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> 

有了這個，你將和谷歌有相同的效果！