Question

我试图创建一个CSS动画来将点击的按钮（实际上是它包含的整个DIV）移动到中心。每个按钮都在Div中，我很难弄清楚如何使用一个css类让任何按钮移动到中心。

我已经在css中尝试了多种方式，但是在其他按钮不移动的地方，我们无法做到这一点。

codepen是here。

如果您运行代码并单击＆＃34; DIV0＆＃34;按钮，它移动到中心。（再次单击按钮进行重置。）当您单击任何其他按钮时，我希望它们转到与＆＃34; DIV0＆＃34;的位置相同的位置。按钮去了。

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

所以我的布局可能如下：

DIV0 DIV1
DIV2 DIV3

或只是：

DIV0 DIV1
DIV2

这是另一个代码。 http://codepen.io/furnaceX/pen/BKjyEp/ 这个按钮可以将所有按钮放到正确的位置，但是定心不会有动画效果。有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

使用复选框的纯CSS解决方案（似乎是一个按钮，但这是一个隐藏的复选框）：

使用4个按钮进行了更新

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将z-index添加到中心类，因为其他div正在覆盖您的中心按钮。当您再次单击时，不要单击中心按钮，单击兄弟div。

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

2 个答案: