1

我有一个页面的 2 个部分 1. 侧边栏菜单 2. 页面内容

当我单击页面内容上的按钮时，滑动条菜单应该滑出。我正在尝试使用 Angular JS 的 ngClass 来实现这一点。

这是我的 CSS 首先：

*,
*:after,
*::before {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

html,body,
.st-container,
.st-pusher,
.st-content {

    height:100%;

}

.st-content {
       overflow-y:scroll;
}

.st-content,
.st-content-inner {
        position:relative;  

}

.st-container {
    position: relative;
    overflow: hidden;
}

.st-pusher {
        position: relative;
        left: 0;
        z-index: 99;
        height: 100%;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
}
.st-pusher {
        padding-left: 250px;
}

.st-pusher::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        background: rgba(0,0,0,0.2);
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
        transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
        width: 100%;
        height: 100%;
        opacity: 1;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
}

.st-menu {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        visibility: visible;
        width: 250px;
        height: 100%;
        background: #333300;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
}

.st-pusher-expand {
        padding-left: 100px;
}

.st-menu-collapse {
    position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        visibility: visible;
        width: 50px;
        height: 100%;
        background: #333300;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
}

这是我的 index.html：

    <div class="st-container"> <!-- The whole screen -->
  <div class="st-pusher" ng-class="myVar">
     <nav class="st-menu" ng-class="myVar1"></nav> <!-- The navigation menu -->
     <div class="st-content">
        <div class="st-content-inner">
            <div class="container" ng-view="">
            </div>
        </div>
    </div>
  </div>
</div>

这是控制器代码： 

$scope.boolChangeClass = false;

    $scope.click = function() {

        if (!$scope.boolChangeClass) {
            $scope.myVar = "st-pusher-expand";
            $scope.myVar1 = "st-menu-collapse";
        } else {
            $scope.myVar = "st-pusher";
            $scope.myVar1 = "st-menu";
        }
        $scope.boolChangeClass = !$scope.boolChangeClass;
        setTimeout(function() {
            $scope.$apply();
        });
    };

但是代码不起作用。我看了一下这个例子，如果我尝试一下，它就可以工作。但是我需要的是在侧边栏消失时将右侧内容调整为容器的完整大小。

AngularJS 的不同转换

4

0 回答 0