javascript - AngularJs 相应地重新调整/调整两个 div

Question

我有两个 div，每个 div 覆盖整个页面 50%，在较低的 div 上单击我希望它覆盖全屏并再次单击示例返回

JQuery equivalent

    $('.wrapper div.green').click(function() {
    $(this).toggleClass('go')
    if($(this).hasClass('go')){
      $(this).animate({'height':'100%'},{
          duration:200,
          step:function(gox){
              var height = gox < 100 ? (100 - gox) / 1 : 0;
              $(this).siblings().css('height', height + "%"); 
              }
          })
    }else{
        $('.wrapper div').animate({'height':'50.00%'},200)
    }
});

现在我想在 AngularJS 中使用它并且是新手我遇到了问题，所以寻找一些指导以朝着正确的方向前进。到目前为止我已经尝试过

AngularJs Attempt

我想要的只是与 JQuery 类似的功能。

Answer 1

这是基于您的第一个示例的解决方案 - http://jsfiddle.net/nz2vunLs/2/

它使用 CSS 转换和 Angular Directive(指令) ngClass和 ngClick .我想这不是最干净的解决方案，但它确实有效。

html

<div ng-app ng-controller="Controller" class="wrapper">
    <div ng-class="{min: greenFullscreen}" class="blue animation"></div>
    <div ng-class="{max: greenFullscreen}" ng-click="toggleGreen()" class="green animation"></div>
</div>

Controller

function Controller($scope) {
    $scope.greenFullscreen = false;

    $scope.toggleGreen = function() {
        $scope.greenFullscreen = !$scope.greenFullscreen;
    }
}

额外的 CSS

.green.max {
    height: 100%;
}

.blue.min {
    height: 0%;
}

.animation {
    -webkit-transition: height 200ms;  
    -moz-transition: height 200ms;  
    -o-transition: height 200ms;  
    transition: height 200ms;
}