不同方向的 CSS 过渡

Question

当我将鼠标悬停在里面的小盒子上时，我试图填充一个包装器 (600x600px)。对于左上角的框，使用常规的过渡定时功能很容易完成，但是当尝试在其他方向放大时，我就卡住了。

所以我有以下内容：

#allbox {
  background: #bbb;
  width: 600px;
  height: 600px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}

带盒子：

div.box1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

div.box2 {
  position: absolute;
  top: 0%;
  left: 37.5%;
}

我使用的过渡：

#div1 {-webkit-transition-timing-function: linear;}
#div1 {transition-timing-function: linear;}
div.box1:hover {
  width: 600px;
  height: 600px;
}

但我无法为下面的方框找到一个好的方法。

Answer 1

这是一个使用z-index 保持悬停在顶部的示例。

#allbox {
  background: #bbb;
  width: 600px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}
#allbox div {
  position: absolute;
  z-index: 1;
  top: 0%;
  width: 33.33%;
  height: 50%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 1s linear;
}
div.box1 {
  left: 0;
  background: blue;
}
div.box2 {
  left: 33.33%;
  background: red;
}
div.box3 {
  left: 66.66%;
  background: green;
}
#allbox div:hover {
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 0s linear;
}

<div id="allbox">
  <div class="box1">  
  </div>
  <div class="box2">  
  </div>
  <div class="box3">  
  </div>
</div>

Answer 2

我认为我们只是将“left: 0;”添加到悬停状态。

div.box2:hover {
  left: 0;
  width: 600px;
  height: 600px;
}

希望对您有所帮助。