如何使用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>