Question

我的两个div覆盖了整个页面，每个50％，并且在下部div点击我希望它覆盖全屏并再次点击再次示例

    $('.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转换和角度指令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>

<强>控制器

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

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

1 个答案: