如何使用CSS和/或Angular点击时将DIV移动到中心位置？

Question

我想创建一个CSS动画来移动点击按钮（实际上是它包含的整个DIV）到中心。每个按钮都在Div中，我无法弄清楚如何使用一个CSS类来获取任何按钮以移动到中心。

我已经尝试了各种各样的方式在CSS中，但尚未能够做到这一点，其他按钮不移动。

codepen是here。

如果您运行代码并单击“DIV0”按钮，它将移动到中心位置。 （再次单击该按钮重置。）当您单击其他任何按钮时，我希望它们与“DIV0”按钮所在的位置相同。

更新：我需要以编程方式设置DIV /按钮（将“divs”数组传递给HTML，以便ng-repeat构建布局）。 “divs”数组的大小可能会有所不同，因此使用此方法可自动构建布局。此外，div需要占用宽度和高度的50％，以便在屏幕上排列出2-divs的矩阵。每个div都将充满图像和文字。我试图将div的全部内容移到中心，而不仅仅是按钮。

所以我的布局可能看起来像：

DIV0 DIV1
DIV2 DIV3

或者只是：

DIV0 DIV1
DIV2

这是另一个codepen。 http://codepen.io/furnaceX/pen/BKjyEp/ 这一个获取所有的按钮到正确的位置，但居中不动画。有任何想法吗？

angular.module('myApp', []) 
 
    .controller("ctrl", ['$scope', function($scope) { 
 
    $scope.divs = [{id: 0, center: false}, {id: 1, center: false}, 
 
        {id: 2, center: false}, {id: 3, center: false}]; 
 
    $scope.fade = false; 
 

 
    $scope.go = function(div) { 
 
     if (!$scope.fade) { 
 
     div.center = true; 
 
     console.log("click again to reset"); 
 
     $scope.fade = true; 
 
     } else { 
 
     div.center = false; 
 
     $scope.fade = false; 
 
     } 
 
     
 
    } 
 
    }])

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.block { 
 
    text-align: center; 
 
    width: 50%; 
 
    height: 50%; 
 
    float: left; 
 
} 
 

 
.center { 
 
    transition:0.5s linear all; 
 
    transform: translate(50%,50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    //position: relative; 
 
} 
 

 
.fadeout { 
 
    transition:0.5s linear all; 
 
    opacity: 0 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div class="container" ng-controller="ctrl"> 
 
    <div ng-repeat="div in divs" class="block"> 
 

 
     <div ng-class="{center: div.center, fadeout: fade*!div.center}"> 
 
     <button ng-click="go(div)">DIV{{ div.id }}</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

添加的z-index到中心级的，因为你的其他的div被覆盖的中央按钮。当你再次点击你不点击中心按钮，你点击兄弟分区。

使用复选框

Answer 2

纯CSS解决方案（似乎是一个按钮，但是这是一个复选框卧底）：

有4个按钮

body { 
 
    width: 100%; 
 
    height: 100vh; 
 
    margin: 0px; 
 
    background: honeydew; 
 
} 
 

 
label > input { 
 
    display: none; 
 
} 
 

 
#button0 { 
 
    position: absolute; 
 
    line-height: 45px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 2px dashed black; 
 
    box-sizing: border-box; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    opacity: 0.5; 
 
} 
 

 
label > input ~ .button { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    line-height: 45px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 2px solid crimson; 
 
    box-sizing: border-box; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
} 
 

 
label > input ~ #button1 { 
 
    left: 0; 
 
    top: 0; 
 
    background: gold; 
 
} 
 

 
label > input ~ #button2 { 
 
    left: calc(100% - 50px); 
 
    top: calc(100% - 50px); 
 
    background: yellowgreen; 
 
} 
 

 
label > input ~ #button3 { 
 
    left: calc(100% - 50px); 
 
    top: 0; 
 
    background: skyblue; 
 
} 
 

 
label > input ~ #button4 { 
 
    left: 0; 
 
    top: calc(100% - 50px); 
 
    background: tomato; 
 
} 
 

 
label > input:checked ~ #button1, label > input:checked ~ #button2, label > input:checked ~ #button3, label > input:checked ~ #button4 { 
 
    left: calc(50% - 25px); 
 
    top: calc(50% - 25px); 
 
    border: 2px solid black; 
 
    -webkit-transition: all 3s ease-in-out; 
 
    transition: all 3s ease-in-out; 
 
}

<div id=button0 class=button>target</div> 
 

 
<label> 
 
<input type="checkbox" name="run" value="click" /> 
 
<div id=button1 class=button>click</div> 
 
</label> 
 

 
<label> 
 
<input type="checkbox" name="run" value="click" /> 
 
<div id=button2 class=button>click</div> 
 
</label> 
 

 
<label> 
 
<input type="checkbox" name="run" value="click" /> 
 
<div id=button3 class=button>click</div> 
 
</label> 
 

 
<label> 
 
<input type="checkbox" name="run" value="click" /> 
 
<div id=button4 class=button>click</div> 
 
</label>