javascript - 如何在表格布局中从中心过渡宽度/高度

Question

我有一个模仿表格外观的灵活元素布局。想法是像这样显示它们，但是当您悬停时，悬停的元素需要在所有 4 个方向上扩展，与其他元素重叠，同时保持居中。当鼠标离开元素时，它应该折叠回原来的大小。但是，在鼠标进入和鼠标离开时，过渡应该是平滑的。我让它在鼠标进入时工作，但无法弄清楚如何让它在鼠标离开时平滑。

您将在下面的示例中看到，鼠标移出并不平滑，因为它丢失了索引值，如果没有该索引值，我将无法使其重叠。还有另一种方法吗？ Javascript 解决方案也是受欢迎的，但不是首选。

当我将 html/css 粘贴到 SO 时，悬停似乎根本不起作用。至少在我的浏览器上，所以我留下了一个 js fiddle 链接，您可以在其中看到我的问题。请注意，当鼠标离开框时，它会丢失 z-index 值，因此该框的右侧会落在下一个框的后面，而左侧会保持在顶部并正确过渡。

这是 JS Fiddle 链接:https://jsfiddle.net/1gr036k5/1/

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 1000px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.wrapper div {
  width: 25%;
  height: 200px;
  background-color: red;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.wrapper.two div span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  background-color: blue;
  opacity: 0;
  transition: all 1s ease;
}

.wrapper div:hover {
  z-index: 3;
}

.wrapper div span:hover {
  opacity: 100%;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
}

<div class="wrapper">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>

Answer 1

这是你要找的吗？

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 1000px;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper div {
  width: 25%;
  height: 200px;
  background-color: red;
  border-bottom: 1px solid #FFF;
  border-right: 1px solid #FFF;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position:relative;
}

.wrapper div span {
  display: block;
  width: 100%;
  height: 100%;
  position:absolute;
  left:0;
  top:0;
  background-color: blue;
  transition: all 1s ease;
  opacity:0;
}

.wrapper div:hover {
}

.wrapper div:hover span{
 transform: scale(2, 2);
 opacity:1;
 z-index:4;
}

<div class="wrapper">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
</div>