html - 单击时如何使用 CSS 和/或 Angular 将 DIV 移动到中心？

Question

我正在尝试创建一个 CSS 动画以将单击的按钮(实际上，它包含在其中的整个 DIV)移动到中心。每个按钮都在一个 Div 中，我无法弄清楚如何使用一个 css 类让任何按钮移动到中心。

我在css中尝试了多种方式，但一直没能在其他按钮不动的地方做到这一点。

Codepen 是 here .

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

更新:我需要以编程方式设置 DIV/按钮(将“divs”数组传递给 HTML，以便 ng-repeat 构建布局)。 “divs”数组的大小可能会有所不同，因此执行此方法会自动构建布局。此外，div 需要占据宽度和高度的 50%，以便它在屏幕上排列出一个 2-divs-cross 矩阵。每个 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

使用checkbox的纯CSS方案(貌似是个按钮，其实是checkbox undercover):

更新了 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>